:root{--paper:#F7F3E9;--paper-edge:#ECE4D1;--ink:#26211B;--ink-soft:#6F6757;--cinnabar:#B23A2E;--cinnabar-soft:rgba(178,58,46,.42);--jade:#4F7A66;--line:#E0D7C2;--cjk-serif:"Songti SC","STSong","Noto Serif SC","SimSun",serif;}
*{box-sizing:border-box}html,body{margin:0;padding:0}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);background:radial-gradient(120% 80% at 50% -10%,#FBF8F0 0%,var(--paper) 55%,var(--paper-edge) 100%) fixed;min-height:100vh;-webkit-font-smoothing:antialiased;line-height:1.6;}
a{color:var(--cinnabar);text-decoration:none}a:hover{text-decoration:underline}
.wrap{max-width:880px;margin:0 auto;padding:0 24px}
.site-nav{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:26px 24px 0;max-width:880px;margin:0 auto}
.brand{display:inline-flex;align-items:baseline;gap:10px;color:var(--ink)}.brand:hover{text-decoration:none}
.brand .han{font-family:var(--cjk-serif);font-size:24px;letter-spacing:.05em}
.brand .lat{font-family:Georgia,serif;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--cinnabar);font-weight:600}
.site-nav .links a{font-size:14px;font-weight:600;margin-left:16px}
.crumb{font-size:13px;color:var(--ink-soft);margin:22px 0 6px}.crumb a{color:var(--ink-soft)}
h1{font-family:var(--cjk-serif);font-size:30px;margin:4px 0 18px;color:var(--ink)}
.hero{display:flex;gap:28px;flex-wrap:wrap;align-items:flex-start;margin:0 0 26px}
.cell{position:relative;width:260px;height:260px;background:#FFFDF8;border:1.5px solid var(--cinnabar);border-radius:8px;flex:0 0 auto;overflow:hidden;box-shadow:0 10px 24px -16px rgba(38,33,27,.5)}
.cell .grid{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.cell .grid line{stroke:var(--cinnabar-soft);stroke-width:1;stroke-dasharray:5 5}
.cell .writer{position:absolute;inset:0;display:grid;place-items:center}
.cell .writer svg{width:100%!important;height:100%!important}
.replay{position:absolute;bottom:8px;right:8px;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:rgba(255,253,248,.9);color:var(--ink);font-size:17px;cursor:pointer;display:grid;place-items:center}
.replay:hover{border-color:var(--cinnabar);color:var(--cinnabar)}
.facts{flex:1 1 280px;min-width:240px}
.facts .py{font-family:Georgia,serif;font-style:italic;font-size:30px;color:var(--cinnabar);margin:0 0 2px}
.facts .bpm{font-family:var(--cjk-serif);font-size:20px;color:var(--jade);margin:0 0 16px;letter-spacing:.05em}
.facts dl{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin:0}
.facts dt{color:var(--ink-soft);font-size:14px}.facts dd{margin:0;font-weight:600;font-size:15px}
.facts dd .han{font-family:var(--cjk-serif);color:var(--cinnabar)}
.cta{display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:#fff;font-weight:600;font-size:15px;padding:12px 22px;border-radius:13px;margin:6px 0 4px}
.cta:hover{background:#3a342b;text-decoration:none}
p.lead{color:var(--ink-soft);font-size:16px;margin:0 0 22px}
h2{font-family:var(--cjk-serif);font-size:21px;margin:30px 0 12px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.more{display:flex;flex-wrap:wrap;gap:8px}
.more a{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:#FFFDF8;border-radius:10px;padding:7px 12px;color:var(--ink)}
.more a:hover{border-color:var(--cinnabar);text-decoration:none}
.more a .han{font-family:var(--cjk-serif);font-size:19px}.more a .p{font-family:Georgia,serif;font-style:italic;color:var(--cinnabar);font-size:13px}
.grid-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;margin:18px 0 10px}
.grid-list a{display:flex;flex-direction:column;align-items:center;gap:3px;border:1px solid var(--line);background:#FFFDF8;border-radius:12px;padding:14px 8px;color:var(--ink)}
.grid-list a:hover{border-color:var(--cinnabar);text-decoration:none}
.grid-list .han{font-family:var(--cjk-serif);font-size:34px;line-height:1}
.grid-list .p{font-family:Georgia,serif;font-style:italic;color:var(--cinnabar);font-size:14px}
.grid-list .d{font-size:11px;color:var(--ink-soft);text-align:center}
.site-footer{max-width:880px;margin:40px auto 0;padding:24px;border-top:1px solid var(--line);color:var(--ink-soft);font-size:13.5px;text-align:center;line-height:1.6}
.site-footer .han{font-family:var(--cjk-serif);color:var(--cinnabar)}
@media(max-width:560px){.cell{width:220px;height:220px}h1{font-size:26px}}