:root {
  color-scheme:dark;
  --bg:#222426;
  --text:#d7d8d6;
  --muted:#979b9e;
  --line:#373b3e;
  --link:#9cbedb
}
* {
  box-sizing:border-box
}
@font-face {
  font-family:'jp-biz';
  src:local('BIZ UDGothic');
  size-adjust:88%
}
@font-face {
  font-family:'jp-yu';
  src:local('Yu Gothic');
  size-adjust:88%
}
body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:16px/1.8 Consolas,'jp-biz','jp-yu','BIZ UDGothic','Yu Gothic',monospace
}
a {
  color:var(--link);
  text-decoration:none
}
a:hover {
  color:#e1edf7
}
a:focus-visible,button:focus-visible {
  outline:2px solid #b8d6ef;
  outline-offset:5px
}
.skip {
  position:absolute;
  left:20px;
  top:-80px
}
.skip:focus {
  top:10px;
  z-index:5;
  background:var(--bg)
}
.window {
  min-height:100svh;
  display:flex;
  flex-direction:column
}
.titlebar {
  padding:13px 26px;
  font-size:13px;
  color:var(--muted);
  border-bottom:1px solid var(--line);
  letter-spacing:.06em
}
.home {
  width:min(900px,100%);
  margin:70px auto 110px;
  padding:0 28px
}
.lines {
  list-style:none;
  counter-reset:line;
  padding:0;
  margin:0
}
.lines>li {
  counter-increment:line;
  position:relative;
  padding-left:64px;
  min-height:38px
}
.lines>li:before {
  content:counter(line,decimal-leading-zero);
  position:absolute;
  left:0;
  width:30px;
  text-align:right;
  color:#7f868c;
  font-size:13px;
  line-height:38px
}
.lines h1 {
  font-size:15px;
  font-weight:400;
  margin:0;
  line-height:38px
}
.menu a {
  display:inline-block;
  padding:3px 0
}
footer {
  margin-top:auto;
  border-top:1px solid var(--line);
  padding:10px 26px;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:8px 18px;
  color:var(--muted);
  font-size:12px
}
.gallery {
  width:min(1180px,100%);
  margin:42px auto 70px;
  padding:0 32px
}
.heading {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:20px;
  margin-bottom:32px
}
.heading h1 {
  font-size:16px;
  font-weight:400;
  margin:0
}
.heading span {
  font-size:13px;
  color:var(--muted)
}
.grid {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:26px 20px
}
.grid figure {
  margin:0
}
.grid a {
  display:block;
  text-decoration:none
}
.grid img {
  display:block;
  width:100%;
  height:160px;
  object-fit:contain;
  background:#202224
}
.grid a:hover img {
  background:#292c2f
}
dialog {
  width:100%;
  height:100%;
  height:100dvh;
  max-width:none;
  max-height:none;
  margin:0;
  padding:0;
  border:0;
  background:#1c1e20;
  color:var(--text)
}
dialog::backdrop {
  background:#1c1e20
}
dialog[open] {
  display:flex;
  flex-direction:column
}
.close {
  align-self:flex-end;
  margin:8px 14px;
  border:0;
  font-size:13px;
  letter-spacing:.06em
}
.stage {
  flex:1;
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:auto;
  padding:0 16px max(16px,env(safe-area-inset-bottom))
}
.stage img {
  max-width:100%;
  max-height:100%;
  object-fit:contain
}
.stage p {
  color:var(--muted)
}
button {
  font:inherit;
  color:var(--text);
  background:transparent;
  border:1px solid #51585d;
  min-width:48px;
  min-height:44px;
  padding:5px 12px;
  cursor:pointer
}
button:hover {
  background:#34393d
}
body:has(dialog[open]) {
  overflow:hidden
}
@media(min-width:1500px) {
  .home {
    margin-top:110px
  }
}
@media(max-width:700px) {
  .titlebar {
    padding:12px 18px
  }
  .home {
    margin:48px auto 75px;
    padding:0 18px
  }
  .lines>li {
    padding-left:46px;
    min-height:44px
  }
  .menu a {
    min-height:44px;
    padding:7px 0
  }
    .titlebar a {
    display:inline-flex;
    align-items:center;
    min-height:44px
  }
  .titlebar {
    padding-top:4px;
    padding-bottom:4px
  }
  .lines>li:before {
    width:24px;
    line-height:44px
  }
  .lines h1 {
    line-height:44px
  }
  .gallery {
    padding:0 18px;
    margin-top:28px
  }
  .grid {
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:24px 16px
  }
  .grid img {
    height:140px
  }
  .heading {
    gap:12px;
    flex-wrap:wrap
  }
  footer {
    padding:10px 18px;
    justify-content:flex-start
  }
}
@media(max-width:480px) {
  .grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .grid img {
    height:150px
  }
}
.home .lines>li {
  width:fit-content;
  max-width:100%;
  animation:type .24s steps(16,end) both;
  animation-delay:calc(.25s + var(--i)*.09s)
}
.home .lines>li:focus-within {
  animation:none
}
@media(prefers-reduced-motion:reduce) {
  html:not([data-motion="on"]) .home .lines>li {
    animation:none
  }
}
@keyframes type {
  from {
    clip-path:inset(0 100% 0 0)
  }
  to {
    clip-path:inset(0)
  }
}
.titlebar a {
  color:inherit;
  text-decoration:none
}
.titlebar a:hover {
  color:var(--text)
}
.menu a {
  color:var(--link)
}
.menu[data-page="gallery"] {
  --accent:#7da6e8
}
.menu[data-page="books"] {
  --accent:#58b88a
}
.menu[data-page="works"] {
  --accent:#ffea00
}
.menu[data-page="about"] {
  --accent:#f8f4e6
}
.menu[data-page="contact"] {
  --accent:#cf80b5
}
.menu:hover a,.menu a:focus-visible {
  color:var(--accent)
}
.text {
  width:min(960px,100%);
  margin:48px auto 80px;
  padding:0 32px;
  overflow-wrap:anywhere
}
.text h1 {
  font-size:16px;
  font-weight:400;
  margin:0 0 32px;
  color:var(--muted)
}
.text p {
  margin:0 0 24px
}
.credits {
  display:grid;
  grid-template-columns:4ch minmax(0,1fr);
  gap:0 28px;
  margin:0
}
.credits dt {
  color:var(--muted)
}
.credits dd {
  margin:0
}
.credits dd p {
  margin-bottom:24px
}
@media(max-width:700px) {
  .text {
    padding:0 18px;
    margin-top:32px
  }
  .credits {
    gap:0 18px
  }
}
.books {
  max-width:744px
}
.book {
  margin:0 0 64px;
  padding-bottom:48px;
  border-bottom:1px solid var(--line)
}
.book:last-child {
  border-bottom:0
}
.book h2 {
  font-size:16px;
  font-weight:400;
  margin:0 0 10px
}
.book p {
  font-size:14px;
  margin:0 0 12px
}
.book-photos {
  margin-top:24px
}
.book-photos a {
  display:block;
  margin:0 auto 18px;
  max-width:100%
}
.book-photos .cover {
  width:540px
}
.book-photos .portrait {
  width:240px
}
.book-photos .spread {
  width:380px
}
.book-photos img {
  display:block;
  width:100%;
  height:auto
}
html {
  scrollbar-width:thin;
  scrollbar-color:#454b50 var(--bg)
}
::-webkit-scrollbar {
  width:10px;
  height:10px
}
::-webkit-scrollbar-thumb {
  background:#454b50
}
::-webkit-scrollbar-track {
  background:var(--bg)
}
::selection {
  background:#3b4a57;
  color:#e8eaec
}
.home .menu:hover,.home .menu:focus-within {
  background:#2a2d30
}
.menu[data-page="diary"] {
  --accent:#f0a060
}
.diary {
  max-width:744px
}
.entry {
  margin:0 0 40px;
  padding-bottom:32px;
  border-bottom:1px solid var(--line)
}
.entry:last-child {
  border-bottom:0
}
.entry .stamp {
  margin:0;
  font-size:13px;
  color:var(--muted)
}