* { box-sizing: border-box; }
body { margin: 0; font: 17px/1.5 system-ui, -apple-system, sans-serif; color: #1d1d1d; background: #fafaf8; }
main { max-width: 640px; margin: 0 auto; padding: 0 1rem 3rem; }
#nav { position: sticky; top: 0; z-index: 10; display: flex; background: #fff; border-bottom: 1px solid #ddd; }
#nav a { flex: 1; text-align: center; padding: .7rem .2rem; color: #555; text-decoration: none; font-size: .95rem; }
#nav a.on { color: #000; font-weight: 600; box-shadow: inset 0 -3px 0 #b58863; }
h1 { font-size: 1.4rem; margin: 1.2rem 0 .3rem; }
h2 { font-size: 1.1rem; margin: 1.4rem 0 .4rem; }
.sub, .meta, .foot { color: #666; font-size: .9rem; }
.rule { margin: 1rem 0; padding: .6rem 1rem; background: #fff; border-left: 4px solid #b58863; }
.rule p { margin: .4rem 0; }
ul { padding-left: 1.2rem; }
li { margin: .35rem 0; }
a { color: #6b4a2b; }
.btn { display: inline-block; padding: .55rem .9rem; background: #6b4a2b; color: #fff; border-radius: 6px; text-decoration: none; }
.tabs { display: flex; gap: .3rem; margin: .8rem 0; }
.tabs a { flex: 1; text-align: center; padding: .45rem 0; border: 1px solid #ccc; border-radius: 6px; text-decoration: none; color: #333; background: #fff; }
.tabs a.on { background: #6b4a2b; color: #fff; border-color: #6b4a2b; }
.lead, .turn, .q { margin: .3rem 0; }
.board { width: min(100%, 480px); aspect-ratio: 1; margin: .6rem auto; }
.fb { min-height: 1.5em; margin: .5rem 0; padding: 0; }
.fb.ok, .fb.bad { padding: .5rem .7rem; border-radius: 6px; }
.fb.ok { background: #e3f1df; }
.fb.bad { background: #f8e1df; }
.row { display: flex; gap: .5rem; flex-wrap: wrap; margin: .5rem 0; }
button { font: inherit; padding: .5rem .9rem; border: 1px solid #bbb; border-radius: 6px; background: #fff; cursor: pointer; }
button.primary { background: #6b4a2b; color: #fff; border-color: #6b4a2b; }
button.link { border: 0; background: none; color: #888; text-decoration: underline; padding: .5rem 0; font-size: .85rem; }
details.answer { margin: .6rem 0; background: #fff; border: 1px solid #e2e2e2; border-radius: 6px; padding: .3rem .8rem; }
details.answer summary { cursor: pointer; padding: .3rem 0; }
.card { border-top: 1px solid #ddd; padding-top: .3rem; }
.scroll { overflow-x: auto; }
table { border-collapse: collapse; font-size: .88rem; width: 100%; }
th, td { text-align: left; vertical-align: top; padding: .35rem .4rem; border-bottom: 1px solid #e4e4e4; }
code { font-size: .85em; }