:root{--bg:#f4f0e7;--paper:#fffdf8;--ink:#11110f;--muted:#4f4a42;--line:#d9d1c3;--accent:#40563d;--accent-dark:#2f432d;--soft:#f5f1e8}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.62;-webkit-text-size-adjust:100%}
.top{padding:32px 18px 22px;max-width:760px;margin:auto}.eyebrow{letter-spacing:.17em;font-size:.82rem;font-weight:850;color:#403c35}h1{font-family:Georgia,serif;font-size:2.65rem;line-height:1.05;margin:.16em 0 .42em}.top>p:not(.eyebrow){font-size:1.22rem;line-height:1.5;max-width:650px}
button{font:inherit}#downloadBtn{width:100%;max-width:540px;border:0;border-radius:999px;background:var(--accent);color:white;padding:16px 20px;font-weight:800;font-size:1.05rem;cursor:pointer}#status{margin-top:10px;font-size:1.04rem;color:var(--muted)}
.jump{position:sticky;top:0;z-index:8;background:rgba(244,240,231,.97);backdrop-filter:blur(10px);padding:12px 18px;border-block:1px solid var(--line);display:flex;gap:28px;justify-content:center}.jump a{color:var(--ink);text-decoration:none;font-weight:800;font-size:1.02rem}
main{max-width:760px;margin:auto;padding:20px 10px 70px}.card{scroll-margin-top:62px;position:relative;background:var(--paper);border:1px solid var(--line);border-radius:22px;padding:20px 16px;margin:0 0 22px;box-shadow:0 4px 18px rgba(0,0,0,.035)}
.num{line-height:1;margin-bottom:8px}.num .current{font-family:Georgia,serif;font-size:1.5rem;font-weight:800;color:var(--accent)}.num .total{font-size:.98rem;font-weight:800;color:#777168}.card h2{font-family:Georgia,serif;font-size:2.08rem;line-height:1.09;margin:.15rem 0 1rem}
.hero{display:block;width:min(100%,430px);height:auto;max-height:270px;object-fit:contain;border-radius:14px;background:var(--soft);margin:0 auto 15px}
.tech{margin:14px 0 12px;background:var(--soft);border-radius:14px;padding:14px 15px;font-size:1.16rem;line-height:1.48}.tech-row{display:grid;grid-template-columns:minmax(118px,auto) 1fr;gap:10px;margin:7px 0}.tech-row strong{color:#29422d}.summary{font-family:Georgia,serif;font-size:1.3rem;line-height:1.58;margin:17px 2px}.route-note{background:#eef1e9;border-left:5px solid var(--accent);border-radius:8px;padding:12px 14px;font-size:1.08rem;line-height:1.5;margin:16px 0;color:#20231f}
.player{margin-top:18px}.part{font-size:.96rem;font-weight:900;text-transform:uppercase;letter-spacing:.075em;margin:0 0 9px;color:#263d29}.audio-ui{background:#eef0e9;border:1px solid #c9d0c2;border-radius:18px;padding:14px 14px 12px;box-shadow:0 4px 14px rgba(35,57,36,.08)}.audio-el{display:none}.audio-controls{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:11px}.audio-btn{border:1px solid #aeb8a8;background:white;color:var(--accent-dark);min-width:58px;height:52px;border-radius:14px;font-size:1rem;font-weight:850;cursor:pointer;touch-action:manipulation}.audio-btn.play{min-width:66px;height:58px;border-radius:50%;background:var(--accent);border-color:var(--accent);color:white;font-size:1.45rem;padding-left:5px}.audio-btn:active{transform:scale(.98)}
.seek{appearance:none;-webkit-appearance:none;width:100%;height:30px;background:transparent;margin:0;cursor:pointer;touch-action:pan-x}.seek::-webkit-slider-runnable-track{height:10px;border-radius:999px;background:#c2c8bc}.seek::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:26px;height:26px;border-radius:50%;background:var(--accent);border:3px solid white;box-shadow:0 1px 5px rgba(0,0,0,.2);margin-top:-8px}.seek::-moz-range-track{height:10px;border-radius:999px;background:#c2c8bc}.seek::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:var(--accent);border:3px solid white}.audio-times{display:flex;justify-content:space-between;font-weight:800;font-size:.96rem;color:#3f453d;margin-top:2px}
h3{font-family:Georgia,serif;font-size:1.62rem;margin:26px 0 4px}.hint,.swipe-hint{color:var(--ink);font-size:1.08rem;font-weight:800;text-align:center;margin:10px 0 12px}.carousel-wrap{position:relative}.art-gallery{display:flex;overflow-x:auto;gap:12px;scroll-snap-type:x mandatory;padding:2px 3px 13px;scrollbar-width:none}.art-gallery::-webkit-scrollbar{display:none}.art-gallery figure{flex:0 0 72%;margin:0;scroll-snap-align:center;background:#fff;border:1px solid var(--line);border-radius:15px;overflow:hidden;box-shadow:0 3px 10px rgba(0,0,0,.05)}.art-gallery img{display:block;width:100%;height:280px;object-fit:contain;background:var(--soft)}.art-gallery figcaption{padding:11px 10px 13px;text-align:center;font-family:Georgia,serif;font-size:1.15rem;font-weight:800;line-height:1.3}.carousel-arrow{position:absolute;z-index:3;top:41%;width:46px;height:46px;padding:0;border-radius:50%;font-size:2rem;line-height:1;background:rgba(255,253,248,.96);color:var(--accent);border:1px solid var(--line);box-shadow:0 2px 8px rgba(0,0,0,.15)}.carousel-arrow.left{left:-7px}.carousel-arrow.right{right:-7px}
.card-nav{display:grid;grid-template-columns:1fr 1fr;gap:10px;border-top:1px solid var(--line);margin-top:22px;padding-top:18px}.card-nav a{min-height:52px;border:1px solid #bdb6aa;border-radius:999px;display:flex;align-items:center;justify-content:center;padding:10px 12px;text-decoration:none;color:var(--ink);font-weight:800;font-size:1rem;text-align:center}.card-nav .next{background:var(--accent);border-color:var(--accent);color:white}.card-nav:has(.next):not(:has(.prev)) .next{grid-column:2}.card-nav:has(.prev):not(:has(.next)) .prev{grid-column:1}
footer{text-align:center;padding:30px 20px 50px;color:var(--muted);font-size:1rem}
@media(max-width:390px){.card h2{font-size:1.88rem}.tech{font-size:1.1rem}.tech-row{grid-template-columns:112px 1fr}.summary{font-size:1.24rem}.hero{max-height:240px;max-width:390px}.art-gallery figure{flex-basis:80%}.art-gallery img{height:260px}.audio-controls{gap:10px}.audio-btn{min-width:54px}}
@media(min-width:700px){.top{padding-top:54px}.card{padding:28px}.hero{max-width:470px;max-height:300px}.art-gallery figure{flex-basis:44%}}