:root{--bg: #f4f0e8;--ink: #1a1916;--weak: #8a857a;--line: #e4dfd4;--tile-face: #fbf8f2;--tile-edge: #2a2824;--tile-back: #1c3228;--riichi-gold: #c4a056;--serif: "Noto Serif SC", "Songti SC", "STSong", serif;--sans: "Noto Sans SC", "PingFang SC", "Source Han Sans SC", sans-serif;--page-pad: 20px;--block: 32px;--bar: 48px}*{box-sizing:border-box}html,body,#root{min-height:100%}html,body{margin:0;background:var(--bg);color:var(--ink)}body{font-family:var(--sans);font-size:15px;line-height:1.85}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit}.screen{min-height:100dvh;background:var(--bg);display:flex;flex-direction:column}.page{padding:0 var(--page-pad) var(--block)}.lesson-page{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}.topbar{height:var(--bar);flex:0 0 var(--bar);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 var(--page-pad);background:var(--bg)}.topbar-back{justify-self:start;font-family:var(--sans);font-size:15px;color:var(--weak)}.topbar-title{margin:0;justify-self:center;font-family:var(--serif);font-size:17px;font-weight:400;color:var(--ink)}.topbar-right{justify-self:end;font-family:var(--sans);font-size:15px;color:var(--weak)}.home{min-height:100dvh;padding:48px var(--page-pad) 28px;display:flex;flex-direction:column}.home-head h1{margin:0;font-family:var(--serif);font-size:68px;font-weight:400;line-height:1.1;color:var(--ink)}.home-menu{margin-top:8px}.home-menu a{display:inline-flex;align-items:center;font-family:var(--serif);font-size:17px;color:var(--ink)}.dir-list{list-style:none;margin:8px 0 0;padding:0}.dir-item{border-bottom:1px solid var(--line)}.dir-item a{display:block;padding:16px 0 15px}.dir-main{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.dir-copy{display:flex;flex-direction:column;flex:1;min-width:0}.topic-index{flex:0 0 auto;font-family:var(--sans);font-size:15px;line-height:1.5;color:var(--weak)}.dir-item.is-started .dir-title{color:var(--ink)}.dir-item.is-unstarted .dir-title,.dir-item.is-started .dir-desc,.dir-item.is-unstarted .dir-desc{color:var(--weak)}.dir-title{font-family:var(--serif);font-size:17px;line-height:1.5}.dir-desc{font-family:var(--sans);font-size:15px;line-height:1.85;color:var(--weak)}.dir-dot{flex:0 0 4px;width:4px;height:4px;margin-top:10px;border:1px solid var(--weak);border-radius:50%;background:transparent}.lesson-title{margin:var(--block) 0 16px;font-family:var(--serif);font-size:32px;font-weight:400;line-height:1.3;color:var(--ink)}.section-title{margin:var(--block) 0 12px;font-family:var(--serif);font-size:20px;font-weight:400;color:var(--ink)}.body{margin:0 0 12px;font-family:var(--sans);font-size:15px;line-height:1.85;color:var(--ink)}.chapter-page .body{font-family:var(--serif)}.chapter-page p.body{white-space:pre-line}.example-label{margin:var(--block) 0 8px;font-family:var(--sans);font-size:15px;color:var(--weak)}.hand-block{margin:12px 0 16px;width:100%;max-width:100%}.tile-row{display:flex;flex-wrap:nowrap;align-items:flex-end;gap:2px}.hand-block .tile-row{display:flex;flex-wrap:nowrap;width:100%;max-width:100%}.rich-text .tile-row{display:inline-flex;vertical-align:middle;margin:0 2px}.tile-hit{display:inline-flex;align-items:flex-end;justify-content:center;width:24px;min-height:44px;padding:0;border:0;background:none;line-height:0}.tile-hit.is-compact{width:22px}.hand-block .tile-row.is-13 .tile-hit,.hand-block .tile-row.is-14 .tile-hit{flex:1 1 0;min-width:0;width:auto;max-width:24px}.hand-block .tile-row.is-14 .tile-hit{max-width:22px}.tile-face{display:block;width:24px;height:34px}.tile-hit.is-compact .tile-face{width:22px;height:31px}.hand-block .tile-row.is-13 .tile-face,.hand-block .tile-row.is-14 .tile-face{width:100%;height:auto;aspect-ratio:24 / 34}.hand-block .tile-row.is-14 .tile-face{aspect-ratio:22 / 31}.tile-face svg,.tile-face img{display:block;width:100%;height:100%}.table-diagram-frame{margin:16px calc(-1 * var(--page-pad)) 24px;width:calc(100% + 2 * var(--page-pad))}.table-diagram{--tile-w: 16px;--tile-h: 22px;--tw: 16px;--th: 22px;--river-w: 14px;--river-h: 19px;--table-serif: "Source Han Serif SC", "Noto Serif SC", "Source Han Serif", var(--serif);--table-sans: "Source Han Sans SC", "Noto Sans SC", "Source Han Sans", var(--sans);display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"north north north" "east center west" "south south south";align-items:center;justify-items:center;row-gap:8px;width:100%;height:auto;background:var(--bg);color:var(--ink);pointer-events:none}.table-center{grid-area:center;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;text-align:center;gap:4px;pointer-events:none}.table-kyoku{display:flex;flex-wrap:nowrap;justify-content:center;gap:8px;font-family:var(--table-serif);font-size:14px;font-weight:400;line-height:1.3;color:var(--ink)}.table-bakaze{font-family:var(--table-serif);font-size:14px;font-weight:400;line-height:1.3;color:var(--ink)}.table-status,.table-seat-label,.table-dora-label{font-family:var(--table-sans);font-size:11px;line-height:1.3;color:var(--weak)}.table-status{white-space:nowrap}.table-scores{margin-top:4px;font-family:var(--table-sans);font-size:11px;line-height:1.45;color:var(--weak)}.table-scores .is-self{color:var(--ink)}.table-dora{margin-top:6px;display:flex;flex-direction:column;align-items:center;gap:2px}.table-dora-tiles{display:flex;align-items:flex-end;gap:1px}.table-riichi-stick{position:relative;width:48px;height:3px;margin-top:6px;background:var(--riichi-gold)}.table-riichi-stick:after{content:"";position:absolute;left:50%;top:50%;width:3px;height:3px;border-radius:50%;background:var(--ink);transform:translate(-50%,-50%)}.table-seat{display:flex}.table-seat.is-north{grid-area:north;grid-column:1 / -1;flex-direction:column;align-items:center}.table-seat.is-south{grid-area:south;grid-column:1 / -1;flex-direction:column;align-items:center}.table-seat.is-east{grid-area:east;justify-self:start;flex-direction:row;align-items:center}.table-seat.is-west{grid-area:west;justify-self:end;flex-direction:row;align-items:center}.table-seat-label{flex:0 0 auto}.table-hand-cluster{display:flex;align-items:flex-end;gap:24px}.table-closed{display:flex;align-items:flex-end;gap:3px}.table-closed-group,.table-fuuro{display:flex;align-items:flex-end;gap:1px}.table-fuuro-list{display:flex;align-items:flex-end;gap:6px}.table-kakan{display:flex;flex-direction:column-reverse;align-items:center;width:var(--tile-h)}.table-river{display:flex;align-items:flex-start;gap:1px}.table-river-row{display:flex;align-items:flex-end;gap:1px}.table-seat.is-north .table-hand-cluster{margin-bottom:16px}.table-seat.is-south .table-hand-cluster{margin-top:16px}.table-seat.is-north .table-seat-label{margin-bottom:4px}.table-seat.is-south .table-seat-label{margin-top:4px}.table-seat.is-north .table-river{flex-direction:column}.table-seat.is-south .table-river{flex-direction:column-reverse}.table-seat.is-east .table-hand-cluster{flex-direction:column;align-items:flex-start}.table-seat.is-west .table-hand-cluster{flex-direction:column;align-items:flex-end}.table-seat.is-east .table-closed,.table-seat.is-west .table-closed,.table-seat.is-east .table-closed-group,.table-seat.is-west .table-closed-group,.table-seat.is-east .table-fuuro,.table-seat.is-west .table-fuuro,.table-seat.is-east .table-fuuro-list,.table-seat.is-west .table-fuuro-list{flex-direction:column}.table-seat.is-east .table-closed,.table-seat.is-west .table-closed{width:16px;max-width:16px}.table-seat.is-east .table-hand-cluster{margin-right:16px}.table-seat.is-west .table-hand-cluster{margin-left:16px}.table-seat.is-east .table-seat-label{margin-right:4px}.table-seat.is-west .table-seat-label{margin-left:4px}.table-seat.is-east .table-river,.table-seat.is-west .table-river{flex-direction:row;width:29px;max-width:29px}.table-seat.is-west .table-river{flex-direction:row-reverse}.table-seat.is-east .table-river-row,.table-seat.is-west .table-river-row{flex-direction:column;width:14px;max-width:14px}.table-seat.is-east .table-river-row:has(.is-sideways),.table-seat.is-west .table-river-row:has(.is-sideways){width:22px;max-width:22px}.table-seat.is-east .table-river:has(.is-sideways),.table-seat.is-west .table-river:has(.is-sideways){width:auto;max-width:none}.table-diagram .tile-hit{width:var(--tile-w);min-width:var(--tile-w);max-width:var(--tile-w);min-height:0;height:var(--tile-h);flex:0 0 auto}.table-diagram .tile-hit .tile-face,.table-diagram .tile-hit .tile-face img{display:block;width:100%;height:100%;max-width:100%;max-height:100%}.table-diagram .tile-hit.is-sideways{align-items:center;justify-content:center;width:var(--tile-h);min-width:var(--tile-h);max-width:var(--tile-h);height:var(--tile-w)}.table-diagram .tile-hit.is-sideways .tile-face{width:var(--tile-w);height:var(--tile-h);transform:rotate(-90deg)}.table-diagram .table-river .tile-hit:not(.is-sideways){width:var(--river-w);min-width:var(--river-w);max-width:var(--river-w);height:var(--river-h)}.table-diagram .table-river .tile-hit.is-sideways{width:var(--tile-h);min-width:var(--tile-h);max-width:var(--tile-h);height:var(--tile-w)}.table-diagram .table-river .tile-hit.is-sideways .tile-face{width:var(--tile-w);height:var(--tile-h);transform:rotate(-90deg)}@media(min-width:720px){.screen,.home{width:390px;margin:0 auto}}