:root { color-scheme: light; font-family: system-ui, sans-serif; background: #f4f6f8; color: #17212b; }
* { box-sizing: border-box; } body { margin: 0; } button, input, select { font: inherit; } button { cursor: pointer; border: 0; border-radius: .6rem; padding: .7rem 1rem; background: #086b5d; color: white; font-weight: 700; } label { display: grid; gap: .35rem; margin: .7rem 0; } input, select { padding: .65rem; border: 1px solid #b8c2ca; border-radius: .45rem; } .cover, .board-page { max-width: 1080px; margin: auto; padding: 1.5rem; } .cover header { max-width: 38rem; margin: 3rem 0 2rem; } h1 { margin: 0; font-size: clamp(2rem, 6vw, 3.8rem); } h2 { margin-top: 0; } .eyebrow { color: #08796a; font-weight: 800; letter-spacing: .08em; } .cover-card, .upload-panel, .gallery { background: white; border-radius: 1rem; padding: 1.25rem; margin: 1rem 0; box-shadow: 0 3px 18px #17212b12; } .create { border: 1px solid #d6e2df; } .notice { padding: .8rem; border-radius: .5rem; } .error { color: #842029; background: #f8d7da; } .board-header { display: flex; align-items: start; justify-content: space-between; gap: 1rem; } .code { font-variant-numeric: tabular-nums; font-weight: 800; } .quiet { background: #52606d; } .new-bar { position: sticky; top: 0; z-index: 3; display: flex; justify-content: space-between; gap: 1rem; padding: .8rem 1rem; color: #fff; background: #c2410c; border-radius: .7rem; margin: 1rem 0; } .slot-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } .slot-card, .thumb { padding: 0; overflow: hidden; text-align: left; background: white; color: inherit; box-shadow: 0 3px 12px #17212b18; } .photo-frame { aspect-ratio: 4 / 3; background: #e5eaee; display: grid; place-items: center; color: #687783; } img { display: block; width: 100%; height: 100%; object-fit: cover; } .slot-meta { display: grid; grid-template-columns: 1fr auto; gap: .25rem; padding: .7rem; } .slot-meta b, .thumb b { color: #c2410c; } .gallery { position: fixed; inset: 1rem; overflow: auto; z-index: 5; } .gallery header { display: flex; justify-content: space-between; } .gallery-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; } .thumb span { display: block; padding: .45rem; } .modal { position: fixed; inset: 0; display: grid; place-items: center; padding: 1rem; z-index: 8; background: #000b; } .modal article { max-width: min(900px, 95vw); max-height: 94vh; background: #fff; padding: 1rem; border-radius: .8rem; } .modal img { max-height: 76vh; object-fit: contain; background: #111; } @media (max-width: 700px) { .slot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; } .board-page { padding: .8rem; } .new-bar { border-radius: 0; margin-inline: -.8rem; } .slot-meta { font-size: .9rem; } }