@charset "UTF-8";
* { box-sizing: border-box; }
html { min-height: 100%; }
body { margin: 0; background: #fff; color: #222; font: 13px/1.7 "MS PGothic", "ＭＳ Ｐゴシック", serif; }
.page { width: min(460px, calc(100% - 48px)); margin: 76px auto 40px; }
.site-title { font-size: 13px; font-weight: normal; }
.header-images { display: flex; align-items: center; gap: 24px; margin: 38px 0 32px; }
.face { display: block; flex: 0 0 76px; }
.face-button { flex: 0 0 76px; padding: 0; border: 0; background: none; cursor: pointer; }
.face-button:focus-visible { outline: 1px dotted #222; outline-offset: 4px; }
#face-dialog { width: min(720px, calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: 32px 12px 12px; border: 1px solid #777; background: #000; }
#face-dialog::backdrop { background: rgb(0 0 0 / 75%); }
#face-video { display: block; width: 100%; max-height: calc(100dvh - 100px); }
.video-close { position: absolute; top: 2px; right: 8px; padding: 0 6px; border: 0; background: none; color: #fff; font-size: 24px; cursor: pointer; }
.friends-wanted { display: block; width: 190px; max-width: calc(100% - 100px); height: auto; }
nav { display: flex; flex-wrap: wrap; gap: 12px 24px; padding-bottom: 13px; border-bottom: 1px solid #aaa; }
a { color: #0000a0; text-decoration: underline; }
a:visited { color: #551a8b; }
a[aria-current="page"] { color: #222; text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible { outline: 1px dotted #222; outline-offset: 4px; }
main { min-height: 226px; padding: 27px 0 40px; }
section[hidden] { display: none; }
h1 { margin: 0 0 24px; font-size: 13px; font-weight: normal; }
h1:focus { outline: none; }
dl { margin: 0; }
dl div { display: grid; grid-template-columns: 98px minmax(0, 1fr); margin-bottom: 12px; }
dt, dd { margin: 0; font-weight: normal; }
dd, .empty { color: #666; }
.empty { margin: 0; }
.bio { margin-top: 32px; line-height: 1.9; overflow-wrap: anywhere; }
.bio p { margin: 0 0 12px; }
.bio p:last-child { margin-bottom: 0; }
.links-list { list-style: none; margin: 0; padding: 0; }
.links-list li { margin-bottom: 12px; }
#purchase-total { margin: 0 0 8px; }
.purchase-note { color: #777; font-size: 11px; margin: 0; }
#purchase-list { list-style: none; margin: 30px 0; padding: 0; }
#purchase-list li { margin: 0 0 24px; overflow-wrap: anywhere; }
footer { display: flex; align-items: center; gap: 10px; border-top: 1px solid #aaa; padding-top: 12px; color: #777; }
.counter { display: inline-block; color: #444; font: 12px/1.3 "Courier New", monospace; letter-spacing: 3px; }
.counter-state { font-size: 10px; }
.counter.counter-special { color: #c00000; }
.access-table { width: 100%; border-collapse: collapse; margin: 20px 0; }
.access-table th, .access-table td { padding: 5px 0; text-align: left; font-weight: normal; border-bottom: 1px solid #ddd; }
.access-table th:last-child, .access-table td:last-child { text-align: right; }
@media (max-width: 520px) { .page { margin-top: 42px; } main { min-height: 230px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }