@charset "UTF-8";
/* わーさん居場所。色は :root の変数だけで決まる（ライトとダークの 2 組） */
:root {
  color-scheme: light dark;
  --desk: #e9eef2;
  --paper: #fcfdfe;
  --rule: #e9eef3;     /* 罫。消すなら transparent に */
  --ink: #1b2f4b;      /* ブルーブラック */
  --ink-soft: #55677f;
  --tag: #a9c3d9;      /* 付箋。紙とインクに揃えた青 */
  --tag-ink: #132436;
  --edge: #c9d3db;
  --shade: rgba(27, 47, 75, .10);
  --line: 2rem;        /* 行の間隔。文字はすべてこの上に乗る */
}
@media (prefers-color-scheme: dark) {
  :root {
    --desk: #11151b;
    --paper: #1a2029;
    --rule: #212934;
    --ink: #e3e9f1;
    --ink-soft: #9dabbd;
    --tag: #7095b3;
    --tag-ink: #0c1722;
    --edge: #2b3440;
    --shade: rgba(0, 0, 0, .35);
  }
}
* { box-sizing: border-box; }
html { font-size: 17px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--desk);
  color: var(--ink);
  font-family: "Klee One", "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;
  line-height: var(--line);
}
.page {
  max-width: 46rem;
  margin: 0 auto;
  padding: var(--line) 1.25rem calc(var(--line) * 2);
  background:
    repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--line) - 1px), var(--rule) calc(var(--line) - 1px), var(--rule) var(--line))
    var(--paper);
  min-height: 100vh;
}
@media (min-width: 48rem) {
  body { padding: var(--line) 0; }
  .page { padding-left: 3rem; padding-right: 3rem; min-height: 0; box-shadow: 0 0 0 1px var(--edge), 0 .5rem 1.5rem var(--shade); }
}
h1, h2, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }

.head { padding-bottom: var(--line); border-bottom: 3px double var(--ink); margin-bottom: calc(var(--line) - 3px); }
.head h1 { font-size: 2rem; font-weight: 600; line-height: calc(var(--line) * 2); letter-spacing: .08em; }
.head p { color: var(--ink-soft); }

section { margin-top: var(--line); }
h2 {
  display: block;
  width: fit-content;
  font-size: .82rem;
  font-weight: 600;
  line-height: var(--line);
  padding: 0 .9em;
  background: var(--tag);
  color: var(--tag-ink);
  transform: rotate(-1.2deg);
  transform-origin: left center;
}
li { display: grid; grid-template-columns: 1fr; }
.name { font-size: 1.05rem; font-weight: 600; }
a { color: var(--ink); text-decoration: underline; text-decoration-style: dotted; text-decoration-thickness: 1px; text-underline-offset: .3em; }
a:hover { text-decoration-style: solid; }
a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.url, .note { font-size: .8rem; color: var(--ink-soft); overflow-wrap: anywhere; }
.url { letter-spacing: .02em; }

@media (min-width: 40rem) {
  li { grid-template-columns: auto 1fr auto; column-gap: .6rem; align-items: center; }
  li::before { content: ""; grid-column: 2; grid-row: 1; border-bottom: 1px dotted var(--ink-soft); transform: translateY(.3rem); }
  .name { grid-column: 1; grid-row: 1; }
  .url { grid-column: 3; grid-row: 1; text-align: right; }
  .note { grid-column: 1 / -1; grid-row: 2; }
}

details { margin-top: var(--line); }
summary { cursor: pointer; font-weight: 600; line-height: var(--line); }
summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
details .note { display: block; }
details li { grid-template-columns: 1fr; }
details li::before { content: none; }
details a { overflow-wrap: anywhere; }
details li { font-size: .9rem; }
@media (min-width: 40rem) {
  details ul { columns: 2; column-gap: 2rem; }
  details li { break-inside: avoid; }
  details .url { grid-column: 1; grid-row: auto; text-align: left; }
}
footer { margin-top: calc(var(--line) * 2); color: var(--ink-soft); font-size: .8rem; text-align: right; }