:root { --site-ink:#000; --site-paper:#fff; --site-lilac:#e8e8ff; --site-line:#999; --site-link:#0000ee; --site-font:"MS Gothic","ＭＳ ゴシック",monospace; }
body.site-page { margin:0; padding:0; color:var(--site-ink); background:var(--site-paper); font:16px/1.6 var(--site-font); }
body.site-page:has(.blog-shell) { line-height:1.7; }
.site-page *, .site-page *::before, .site-page *::after { box-sizing:border-box; }
.site-page a { color:#0000ee; text-decoration:underline; text-underline-offset:1px; }
.site-page a:visited { color:#551a8b; }
.site-page a:hover, .site-page a:active { color:#c00000; }
.site-page a:focus-visible, .site-page button:focus-visible, .site-page input:focus-visible, .site-page select:focus-visible, .site-page summary:focus-visible { outline:2px dotted #000; outline-offset:3px; }
.skip-link { position:fixed; left:8px; top:-100px; z-index:100; padding:8px; background:#ffffcc; }
.skip-link:focus { top:8px; }
.site-topbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:4px 16px; padding:4px 8px; border-bottom:2px groove #ddd; background:#f0f0f0; font-size:14px; }
.site-topbar nav { display:flex; flex-wrap:wrap; gap:4px 14px; }
.site-layout { display:grid; grid-template-columns:minmax(210px,18%) minmax(0,1fr); align-items:start; }
.site-navigation { position:sticky; top:0; background:var(--site-lilac); border-right:3px ridge #ddd; max-height:100vh; overflow:auto; }
.site-navigation > summary { padding:10px 8px; cursor:pointer; font-weight:bold; }
.site-menu { padding:8px; overflow-wrap:anywhere; font:16px/1.5 var(--site-font); }
.site-menu .menu-brand { font-weight:bold; }
.site-menu ul { list-style:none; margin:8px 0 16px; padding:0; }
.site-menu li { margin:7px 0; padding:0; }
.site-menu h2 { font-size:16px; margin:16px 0 8px; padding-top:8px; border-top:1px solid #999; }
.site-menu a { display:inline; }
.site-menu .menu-source { display:inline-block; margin-left:5px; font-size:14px; white-space:nowrap; }
.site-menu .menu-note { display:block; margin:2px 0; font-size:13px; color:#333; }
.site-menu .menu-search { margin:12px 0; }
.site-menu .menu-search > summary { cursor:pointer; font-size:14px; }
.site-menu .project-filters { display:block; padding:8px 0; margin:0; border:0; background:transparent; }
.site-menu .project-filters label { display:block; margin-bottom:8px; }
.site-content { min-width:0; padding:12px 16px; overflow-wrap:anywhere; }
.site-content img { max-width:100%; height:auto; }
.site-content > table { display:block; max-width:100%; overflow-x:auto; }
.site-content > h1 { font-size:26px; line-height:1.4; }
.site-content .blog-header { padding:0 0 20px; }
.site-content .blog-shell { width:100%; max-width:1100px; padding:0; margin:0 auto; }
.site-content .writing-heading h1 { scroll-margin-top:calc(var(--blog-header-height, 75px) + 20px); }
.home-hero { padding-bottom:12px; margin-bottom:16px; border-bottom:2px groove #ddd; }
.home-banner { width:420px; display:block; margin:4px 0 18px; }
.home-welcome { margin:12px 0; }
.home-brand { display:flex; align-items:center; gap:16px; }
.home-brand img { width:120px; max-height:180px; object-fit:contain; }
.home-hero h1 { font-size:26px; line-height:1.4; margin:0 0 12px; }
.home-hero p { max-width:800px; }
.home-actions { display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:16px; }
.home-actions a { font-weight:bold; }
.home-section { margin:20px 0; }
.home-section h2 { border:0; border-bottom:1px solid #999; padding:0 0 4px; font-size:20px; }
.home-about { max-width:900px; }
.catalog-grid { display:block; }
.catalog-card { display:block; padding:12px 8px; border:0; border-bottom:1px dotted #999; border-radius:0; background:transparent; min-width:0; }
.catalog-card h3 { font-size:17px; line-height:1.5; margin:0 0 4px; }
.catalog-card p { font-size:16px; margin:4px 0; }
.catalog-card .project-date { color:#333; font-size:14px; }
.project-actions { display:flex; flex-wrap:wrap; align-items:center; gap:6px 16px; margin-top:5px; font-size:16px; }
.project-actions a { border:0; padding:2px 0; background:transparent; }
.project-actions .source-only { font-size:14px; color:#333; }
.project-filters { display:flex; flex-wrap:wrap; align-items:end; gap:10px; margin:16px 0; padding:10px; border:2px groove #ddd; border-radius:0; background:#f0f0f0; }
.project-filters label { flex:1; min-width:0; font-weight:bold; font-size:14px; }
.project-filters input, .project-filters select { display:block; width:100%; min-width:0; padding:5px; border:2px inset #ddd; border-radius:0; background:white; color:#000; font:16px/1.4 var(--site-font); }
.project-filters button { padding:5px 9px; border:2px outset #ddd; background:#eee; border-radius:0; color:#000; font:14px/1.5 var(--site-font); cursor:pointer; }
.project-filters button:active { border-style:inset; }
.project-filters [role=status] { flex-basis:100%; margin:0; font-size:14px; }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
[hidden] { display:none !important; }
@media(min-width:801px) { .site-navigation > summary { display:none; } }
@media(max-width:800px) {
  .site-layout { display:block; }
  .site-navigation { position:static; max-height:none; border-right:0; border-bottom:2px groove #ddd; }
  .site-menu { padding:4px 12px 12px; }
  .site-menu .menu-main { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 14px; }
  .site-navigation[open] .site-menu { max-height:70vh; overflow:auto; }
  .site-menu li { margin:4px 0; padding:4px 0; }
  .site-content { padding:10px; }
  .project-filters { align-items:stretch; flex-direction:column; }
  .home-brand { align-items:center; gap:10px; }
  .home-brand img { width:75px; }
  .home-hero h1 { font-size:22px; }
  .catalog-card { padding:12px 0; }
}