:root {
  font-family:Inter,"Segoe UI","Noto Sans JP",Meiryo,sans-serif;
  color:#302929;
  background:#faf9f9;
  font-synthesis:none
}

* {
  box-sizing:border-box
}

body {
  margin:0
}

button,input,a {
  -webkit-tap-highlight-color:transparent
}

button,input {
  font:inherit
}

button,a {
  touch-action:manipulation
}

button {
  cursor:pointer
}

a {
  color:inherit;
  text-decoration:none
}

aside {
  position:fixed;
  inset:0 auto 0 0;
  width:240px;
  background:#8b0000;
  color:#f3dede;
  padding:36px 22px;
  display:flex;
  flex-direction:column
}

.brand {
  display:flex;
  align-items:center;
  gap:13px;
  font-size:30px;
  font-weight:800;
  color:#ffffff
}

.brand span {
  font-size:23px;
  color:white;
  letter-spacing:3px
}

.side-caption {
  font-size:12px;
  letter-spacing:1.8px;
  color:#e2baba;
  margin:48px 12px 19px
}

.nav {
  border:0;
  background:transparent;
  color:#f0d5d5;
  display:flex;
  gap:12px;
  align-items:center;
  width:100%;
  padding:14px 12px;
  text-align:left;
  border-radius:7px;
  font-size:17px;
  margin-bottom:6px
}

.nav span {
  font-size:14px
}

.nav.active {
  background:#660000;
  color:#ffffff
}

.nav:hover {
  background:#760000
}

.side-bottom {
  margin-top:auto;
  padding:24px 12px 0;
  border-top:1px solid #a23d3d
}

.avatar {
  width:35px;
  height:35px;
  border-radius:50%;
  background:#ffffff;
  color:#8b0000;
  display:grid;
  place-items:center;
  margin-bottom:13px
}

.side-bottom strong {
  font-size:14px
}

.side-bottom p {
  font-size:12px;
  color:#e8c6c6
}

.public {
  display:block;
  font-size:11px;
  letter-spacing:1.8px;
  margin-top:24px;
  color:#e2baba
}

main {
  margin-left:240px;
  padding:0 54px;
  max-width:1700px
}

header {
  height:88px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid #e1e7ed;
  font-size:13px;
  color:#6b7a8c
}

.slash {
  padding:0 15px;
  color:#c1c9d1
}

.sample {
  font-size:12px;
  color:#798697
}

.intro {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:47px 0 44px
}

.eyebrow {
  font-size:12px;
  letter-spacing:2px;
  font-weight:650;
  color:#8b0000
}

h1 {
  font-size:34px;
  letter-spacing:.03em;
  line-height:1.5;
  margin:13px 0 14px
}

.lead {
  color:#6a7887;
  font-size:14px;
  line-height:1.95;
  margin:0
}

.index-number {
  font-size:48px;
  letter-spacing:-2px;
  color:#e5d5d5;
  font-weight:300;
  text-align:right
}

.index-number span {
  display:block;
  font-size:12px;
  letter-spacing:3px;
  color:#8696a4;
  margin-top:5px
}

.toolbar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px
}

h2 {
  font-size:19px
}

.toolbar h2 span {
  font-family:monospace;
  font-size:13px;
  padding:4px 7px;
  background:#e9eef2;
  color:#667585;
  border-radius:4px;
  margin-left:8px
}

.search {
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 13px;
  background:white;
  border:1px solid #dbe2e8;
  border-radius:6px;
  width:285px;
  color:#80909d
}

.search>span {
  font-size:25px;
  line-height:1
}

.search input {
  width:100%;
  min-width:0;
  border:0;
  outline:0;
  background:transparent;
  font-size:14px;
  color:#302929
}

.search:focus-within {
  outline:2px solid #008c46
}

kbd {
  border:1px solid #e1e5e9;
  border-radius:3px;
  padding:0 5px;
  color:#98a3ad
}

.filter-row {
  display:flex;
  justify-content:space-between;
  gap:15px;
  align-items:center;
  margin:21px 0 25px
}

#filters {
  display:flex;
  gap:7px;
  flex-wrap:wrap
}

.filter {
  font-size:12px;
  padding:7px 12px;
  border:1px solid #e0e6eb;
  border-radius:5px;
  background:transparent;
  color:#657587
}

.filter.active {
  background:#8b0000;
  border-color:#8b0000;
  color:white
}

.sort {
  font-size:12px;
  color:#738392;
  white-space:nowrap
}

.grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px
}

.card {
  display:flex;
  flex-direction:column;
  text-align:left;
  border:1px solid #dfe6ec;
  border-radius:9px;
  background:white;
  overflow:hidden;
  padding:0;
  color:inherit;
  transition:transform .18s,box-shadow .18s
}

.card:hover {
  transform:translateY(-3px);
  box-shadow:0 9px 26px #5300000d;
  border-color:#caa5a5
}

.art {
  height:132px;
  padding:23px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  border-bottom:1px solid #e9eef1;
  overflow:hidden
}

.art.cloud {
  background:#edf5f0
}

.art.code {
  background:#382525;
  color:#e6f1e9
}

.art.doc {
  background:#f5ebeb
}

.art.json {
  background:#edf5f0
}

.art.git {
  background:#f3eeee
}

.art.css {
  background:#f3e9e9
}

.diagram {
  display:flex;
  align-items:center;
  gap:12px;
  font:12px monospace;
  color:#276443
}

.diagram b {
  padding:13px 9px;
  border:1px solid #a6c9b5;
  border-radius:5px;
  background:#f9fcfa;
  font-weight:400
}

.code-lines {
  font:13px/1.9 Consolas,monospace;
  width:100%
}

.code-lines em {
  font-style:normal;
  color:#edb9a7
}

.doc-lines {
  width:125px;
  background:#fff;
  padding:16px 19px;
  box-shadow:7px 7px 0 #e8d4d4;
  transform:rotate(-5deg)
}

.doc-lines b {
  font:13px monospace;
  color:#8b0000
}

.doc-lines i {
  height:3px;
  background:#dfc2c2;
  display:block;
  margin-top:9px
}

.big-code {
  font:36px Consolas,monospace;
  color:#008c46;
  letter-spacing:5px
}

.git-flow {
  display:flex;
  align-items:center;
  gap:12px;
  color:#8b0000
}

.git-flow i {
  width:15px;
  height:15px;
  border:2px solid #8b0000;
  border-radius:50%;
  position:relative
}

.git-flow span {
  height:2px;
  width:40px;
  background:#d2a2a2
}

.css-grid {
  display:grid;
  grid-template-columns:repeat(3,33px);
  gap:6px;
  transform:rotate(-9deg)
}

.css-grid i {
  height:27px;
  background:#ddb4b4;
  border-radius:3px
}

.css-grid i:first-child {
  grid-column:span 2;
  background:#8b0000
}

.card-body {
  padding:20px 20px 17px;
  flex:1;
  display:flex;
  flex-direction:column
}

.kind {
  font-size:11px;
  letter-spacing:1.4px;
  color:#77879a
}

.kind.project {
  color:#00773c
}

.card h3 {
  font-size:16px;
  line-height:1.6;
  margin:10px 0 8px;
  font-weight:650
}

.description {
  font-size:13px;
  color:#73808d;
  line-height:1.85;
  margin:0 0 16px
}

.tags {
  display:flex;
  gap:6px;
  flex-wrap:wrap
}

.tag {
  background:#f2f5f7;
  color:#627687;
  font-size:11px;
  border-radius:3px;
  padding:4px 7px
}

.card-bottom {
  margin-top:auto;
  padding-top:18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:#8a96a2;
  font:11px monospace
}

.arrow {
  font:18px sans-serif;
  color:#008c46
}

footer {
  margin-top:43px;
  padding:24px 0;
  border-top:1px solid #e0e6eb;
  display:flex;
  justify-content:space-between;
  gap:20px;
  color:#8b98a5;
  font-size:11px
}

dialog {
  border:1px solid #dce3e8;
  border-radius:12px;
  padding:30px;
  width:min(650px,90vw);
  max-height:85vh;
  color:#302929;
  box-shadow:0 20px 100px #35171733
}

dialog::backdrop {
  background:#2d151588;
  backdrop-filter:blur(3px)
}

.dialog-top {
  display:flex;
  justify-content:space-between;
  align-items:center
}

.dialog-top button {
  border:0;
  background:#eef2f5;
  border-radius:50%;
  height:34px;
  width:34px
}

dialog h2 {
  font-size:25px;
  line-height:1.6
}

#detail-body {
  font-size:16px;
  line-height:1.95;
  margin:25px 0
}

#detail-body pre {
  background:#382525;
  color:#e6f1e9;
  padding:20px;
  border-radius:6px;
  overflow:auto;
  font-size:14px
}

.sample-note {
  font-size:12px;
  color:#768594;
  border-top:1px solid #e3e9ed;
  padding-top:18px
}

button:focus-visible,a:focus-visible {
  outline:3px solid #008c46;
  outline-offset:3px
}

#empty {
  padding:50px 0;
  color:#728393
}

@media(min-width:1500px) {
  main {
    padding:0 70px
  }
  .art {
    height:160px
  }
}

@media(max-width:1150px) {
  aside {
    width:210px;
    padding:30px 16px
  }
  main {
    margin-left:210px;
    padding:0 30px
  }
  .grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .index-number {
    display:none
  }
}

@media(max-width:700px) {
  aside {
    position:static;
    width:auto;
    padding:20px 22px
  }
  .brand {
    font-size:23px
  }
  .brand span {
    font-size:19px
  }
  .side-caption,.side-bottom {
    display:none
  }
  nav {
    display:flex;
    margin-top:20px;
    gap:5px
  }
  .nav {
    padding:10px 7px;
    gap:6px;
    margin:0;
    justify-content:center
  }
  .nav span {
    font-size:12px
  }
  main {
    margin-left:0;
    padding:0 22px
  }
  header {
    height:64px;
    font-size:12px
  }
  .sample {
    font-size:10px;
    max-width:130px;
    text-align:right
  }
  .intro {
    padding:28px 0
  }
  h1 {
    font-size:26px
  }
  .toolbar {
    align-items:flex-start;
    flex-direction:column;
    gap:7px
  }
  .toolbar h2 {
    margin:7px 0
  }
  .search {
    width:100%
  }
  .sort {
    display:none
  }
  .filter-row {
    margin:17px 0 20px
  }
  .grid {
    grid-template-columns:1fr
  }
  .art {
    height:145px
  }
  .card h3 {
    font-size:18px
  }
  .description {
    font-size:14px
  }
  .card-body {
    padding:22px
  }
  .tag,.kind,.card-bottom {
    font-size:12px
  }
  footer {
    flex-direction:column;
    gap:8px
  }
  dialog {
    padding:23px
  }
}

@media(prefers-reduced-motion:reduce) {
  .card {
    transition:none
  }
}

/* Small green accents complement the burgundy navigation. */
.tag {
  background:#edf5f0;
  color:#276443
}

.nav.active {
  box-shadow:inset 3px 0 #ffffff
}

.brand {
  border-left:4px solid #008c46;
  padding-left:10px
}

.topic-cover {
  text-align:center;
  display:flex;
  flex-direction:column;
  gap:10px;
  color:#684343
}

.topic-cover small {
  font:12px monospace;
  letter-spacing:2px
}

.topic-cover strong {
  font-size:24px;
  font-weight:500;
  letter-spacing:.12em
}

.topic-cover span {
  font-size:12px
}

.json .topic-cover {
  color:#276443
}

.art:has(.card-photo) {
  padding:0
}

.card-photo {
  width:100%;
  height:100%;
  object-fit:cover
}