:root { color-scheme: dark; font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Noto Sans JP", Arial, sans-serif; background: #252525; color: #e8e5df; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 280px; }
main { width: min(100%, 1080px); margin: 0 auto; padding: max(12px, env(safe-area-inset-top)) 16px max(12px, env(safe-area-inset-bottom)); }
.visual { margin: 0; display: flex; justify-content: center; }
.visual img { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(100svh - 188px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); object-fit: contain; }
.calendars { width: min(100%, 620px); margin: 12px auto 0; }
.artist { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; border-top: 1px solid #ffffff20; }
h1, h2 { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: .06em; white-space: nowrap; }
.links { display: flex; align-items: center; gap: 5px; }
.links a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 9px; font-size: 11px; line-height: 1.3; color: #dedbd5; text-decoration: none; border-radius: 3px; white-space: nowrap; }
.links a[href]:hover { background: #ffffff0c; color: white; }
.links a:focus-visible { outline: 2px solid #e8e5df; outline-offset: 1px; }
.links a[aria-disabled="true"] { color: #aaa7a1; cursor: default; }
.pending { margin: 2px 0 0; text-align: right; font-size: 10px; color: #a9a69f; }
footer { margin-top: 12px; text-align: center; font-size: 9px; letter-spacing: .18em; color: #96938e; }
@media (max-width: 370px) { main { padding-left: 10px; padding-right: 10px; } .artist { gap: 4px; } h1, h2 { font-size: 12px; } .links { gap: 0; } .links a { padding: 0 6px; font-size: 10px; } }
@media (max-height: 480px) and (orientation: landscape) { .visual img { max-height: none; max-width: 65%; } }