/* Slow slide showcase for letters and fan art. */
.rotator{position:relative;margin:0 0 26px}
.rot-viewport{overflow:hidden;border-radius:22px;padding:4px 0 10px;touch-action:pan-y;overscroll-behavior-x:contain}
.rot-track{display:flex;gap:16px;will-change:transform}
.rot-slide{flex:0 0 var(--rot-card,100%);min-width:0;box-sizing:border-box}
.rot-status{margin:0;padding:22px;border:1px dashed #cfdac5;border-radius:20px;background:var(--surface,#fff);color:var(--muted,#566a5d);font-size:14px;text-align:center}

/* Letters */
.rot-letter{display:flex;flex-direction:column;gap:10px;min-height:210px;padding:22px 22px 18px;border-radius:22px;background:var(--yellow-soft,#fff5c4);border:1px solid #f1e39c;box-shadow:0 6px 18px rgba(29,58,43,.06)}
.rot-letter.is-green{background:var(--pale,#edf5e6);border-color:#d6e6cb}
.rot-letter-body{margin:0;font-size:16px;line-height:1.9;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;overflow:hidden}
.rot-letter-name{margin:auto 0 0;font-size:14px;font-weight:700;color:var(--muted,#566a5d)}
.rot-reply{padding:10px 12px;border-radius:14px;background:#fff;border-left:3px solid var(--pink,#f490ad)}
.rot-reply-label{margin:0 0 2px;font:800 13px/1.5 var(--rounded,sans-serif);color:var(--green)}
.rot-reply-text{margin:0;font-size:14px;line-height:1.7;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere}

/* Fan art */
.rot-art-link{display:flex;flex-direction:column;height:100%;border-radius:22px;overflow:hidden;background:var(--surface,#fff);border:1px solid var(--line,#e6e9dc);box-shadow:0 6px 18px rgba(29,58,43,.06);color:inherit;text-decoration:none}
.rot-art-link:hover{border-color:var(--green)}
.rot-art-frame{position:relative;display:block;aspect-ratio:4/3;background:#f4f1e4;overflow:hidden}
.rot-art-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:8px;box-sizing:border-box}
.rot-art-copy{display:flex;flex-direction:column;gap:2px;padding:12px 16px 14px}
.rot-art-title{font:800 16px/1.5 var(--rounded,sans-serif);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rot-art-name{font-size:14px;color:var(--muted,#566a5d);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Controls */
.rot-controls{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:6px}
.rot-btn{display:grid;place-items:center;width:44px;height:44px;padding:0;border:2px solid #cfe0c4;border-radius:50%;background:var(--surface,#fff);color:var(--green);cursor:pointer}
.rot-btn:hover{border-color:var(--green);background:var(--pale,#edf5e6)}
.rot-btn[hidden]{display:none}
.rot-pause{margin-left:6px}
.rotator.is-paused .rot-pause{background:var(--yellow,#ffe14a);border-color:var(--yellow,#ffe14a);color:var(--ink)}
.rot-count{min-width:72px;text-align:center;font-size:14px;font-weight:700;color:var(--muted,#566a5d);font-variant-numeric:tabular-nums}

/* Home showcase */
.showcase-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:28px;align-items:start}
.showcase-block>h3{display:flex;align-items:center;gap:10px;margin:0 0 12px;font:800 20px/1.5 var(--rounded,sans-serif)}
.showcase-block>h3 svg{color:var(--green)}
.showcase-more{display:inline-flex;align-items:center;gap:4px;min-height:44px;font:800 15px/1.4 var(--rounded,sans-serif);color:var(--green);text-decoration:underline;text-underline-offset:4px}
.showcase-block .rotator{margin-bottom:4px}
@media(max-width:900px){.showcase-grid{grid-template-columns:minmax(0,1fr);gap:22px}}
@media(max-width:760px){.rot-letter{min-height:190px;padding:18px 18px 16px}.rot-letter-body{font-size:15px}}