/* A continuous, quiet center with color carried into the viewport corners. */
body.sm-brand-home{background:#f9fbff;isolation:isolate}
.sm-brand-home::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:url("media/home-corners.svg") center/100% 100% no-repeat;opacity:.72}
.sm-brand-home .sd-header{background:rgba(255,255,255,.86);border-bottom-color:#dbe6f2}
.sm-brand-home .sm-site .sm-hero{background:linear-gradient(120deg,rgba(255,255,255,.97),rgba(238,246,255,.94));border-color:#d7e4f2;box-shadow:0 14px 40px #304e7c12}
.sm-brand-home .sm-hero-poster{box-shadow:0 12px 30px #2344741f}
.sm-brand-home .sm-song{background:rgba(255,255,255,.94);border-color:#d7e4f2}
.sm-brand-home .sd-footer{background:rgba(255,255,255,.88);border-top-color:#dbe6f2}
@media(max-width:600px){.sm-brand-home::before{opacity:.51}.sm-brand-home .sd-header{background:rgba(255,255,255,.91)}}

.sm-brand-home .sm-site .sm-hero-showcase {
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.55fr);
    align-items: stretch;
    gap: 24px;
    padding: 18px 22px;
}
.sm-hero-showcase .sm-hero-copy {display: flex; flex-direction: column; justify-content: center; padding: 16px;}
.sm-hero-mascot {width: min(100%, 230px); aspect-ratio: 3 / 2; margin-inline:auto; background: url("media/mascot.webp") center/contain no-repeat;}
.sm-site .sm-hero-showcase h1 {
    margin: 8px 0 16px;
    text-align: center;
    font-family: "Noto Sans CJK SC", "Source Han Sans SC", "Microsoft YaHei", "PingFang SC", sans-serif;
    font-size: clamp(28px, 3.5vw, 46px);
    font-weight: 900;
    transform: skewX(-12deg);
}
.sm-hero-counts {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0;
    padding: 12px 8px; border-radius: 8px; text-align: center; color: #143c32;
    background:
        radial-gradient(ellipse at top left, #c9598d66, transparent 52%),
        radial-gradient(ellipse at top right, #26a9d077, transparent 52%),
        radial-gradient(ellipse at bottom left, #5b55a866, transparent 52%),
        radial-gradient(ellipse at bottom right, #f7b93faa, transparent 52%),
        #f9fbff;
}
.sm-hero-counts > div {display: flex; flex-direction: column-reverse; justify-content: center;}
.sm-hero-counts dt {font-size: 13px;}
.sm-hero-counts dd {margin: 0; font-size: clamp(22px, 3vw, 34px); font-weight: 750; line-height: 1.25;}
.sm-hero-slides {position: relative; isolation: isolate; overflow: hidden; min-height: 350px; aspect-ratio: 16 / 10; border-radius: 10px; background: #ece8f5;}
.sm-hero-slide {position: absolute; inset: 0; opacity: 0; transition: opacity 900ms ease;}
.sm-hero-slide.is-active {opacity: 1;}
.sm-hero-slide img {display: block; width: 100%; height: 100%; object-fit: contain;}
.sm-hero-slides.is-playing .sm-hero-slide.is-active img {animation: sm-slide-zoom 6s ease-in-out both;}
@keyframes sm-slide-zoom {0%, 100% {transform: scale(1);} 55% {transform: scale(1.06);}}
.sm-slide-controls {position: absolute; z-index: 1; right: 12px; bottom: 12px; display: flex; gap: 6px;}
.sm-slide-controls[hidden] {display: none;}
.sm-view-close {padding: 6px 12px; border: 0; border-radius: 6px; background: #193e30; color: white; cursor: pointer;}
.sm-photo-grid.sm-public-gallery {grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px;}
.sm-public-gallery figcaption {padding: 8px 10px;}
.sm-public-gallery strong {font-size: 13px;}
.sm-photo-viewer {width: min(92vw, 1000px); max-height: 92vh; box-sizing: border-box; padding: 42px 16px 14px; background: #102019; color: white; border: 0; border-radius: 12px;}
.sm-photo-viewer::backdrop {background: #000b;}
.sm-photo-viewer figure {margin: 0; text-align: center;}
.sm-photo-viewer img {display: block; margin: auto; max-width: 100%; width: auto; height: auto; max-height: 68vh; object-fit: contain;}
.sm-photo-viewer figcaption {padding: 8px; overflow-wrap: anywhere;}
.sm-view-close {position: absolute; top: 8px; right: 10px;}
.sm-view-controls {display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;}
.sm-photo-viewer button:disabled {opacity: .5; cursor: default;}
@media (max-width: 800px) {
    .sm-brand-home .sm-site .sm-hero-showcase {grid-template-columns: minmax(0, 1fr); padding: 14px; gap: 14px;}
    .sm-hero-showcase .sm-hero-copy {padding: 8px;}
    .sm-hero-slides {min-height: 0;}
}
@media (max-width: 600px) {.sm-photo-grid.sm-public-gallery {grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;}}
@media (prefers-reduced-motion: reduce) {.sm-hero-slide {transition: none;} .sm-hero-slides.is-playing .sm-hero-slide.is-active img {animation: none;}}
.sm-hero-showcase .sm-hero-copy {justify-content: flex-start;}
.sm-hero-right {min-width: 0;}
.sm-hero-right .sm-song {grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 16px; margin: 18px 0 0; padding: 16px;}
.sm-live-board {max-width: 900px; margin: 24px auto; padding: 20px; border: 1px solid #d7e4f2; border-radius: 14px; background: #ffffffef; color: #193e30;}
.sm-hero-copy .sm-live-board {max-width: none; margin: 0; padding: 16px 12px; border-radius: 0 0 10px 10px;}
.sm-hero-copy .sm-hero-counts {border-radius: 8px 8px 0 0;}
.sm-live-board h2, .sm-site .sm-live-board h2 {font-size: clamp(22px, 2.4vw, 30px); margin: 0 0 6px; line-height: 1.25; text-align: center;}
.sm-ranking-note {margin: 0 0 10px; font-size: 12px; color: #52695f;}
.sm-ranking-list {list-style: none; padding: 0; margin: 0;}
.sm-live-board[data-sm-rank-mode="all"] .sm-ranking-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 20px;
}
@media (max-width: 720px) {
    .sm-live-board[data-sm-rank-mode="all"] .sm-ranking-list {grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px;}
}
@media (max-width: 420px) {
    .sm-live-board[data-sm-rank-mode="all"] .sm-ranking-list {grid-template-columns: minmax(0, 1fr);}
}
.sm-ranking-list li {display: grid; grid-template-columns: 1.5rem minmax(0, 1fr) auto; gap: 9px; align-items: center; padding: 8px 6px; border-top: 1px solid #e2ebe3;}
.sm-ranking-trophy {grid-column: 1;}
.sm-ranking-name {grid-column: 2;}
.sm-ranking-name {font-size: 14px; overflow-wrap: anywhere;}
.sm-ranking-score {grid-column: 3; color: #617668; filter: blur(2px); user-select: none;}
.sm-ranking-list:not(:empty) + .sm-ranking-empty {display: none;}
.sm-ranking-link {margin: 12px 0 0; text-align: right;}
.sm-hero-copy .sm-live-board {padding: 10px 12px;}
.sm-hero-copy .sm-ranking-list li {padding-block: 4px;}
.sm-hero-copy .sm-ranking-note {margin-bottom: 5px;}
.sm-hero-copy .sm-ranking-link {margin-top: 6px;}
@media (min-width: 801px) {
    .sm-hero-showcase .sm-hero-copy {padding-bottom: 0;}
    .sm-site .sm-hero-showcase h1 {margin-bottom: auto; padding-bottom: 12px;}
    .sm-hero-right {display: flex; flex-direction: column; gap: 18px;}
    .sm-hero-right .sm-song {margin-top: auto;}
}
@media (max-width: 600px) {
    .sm-hero-right .sm-song {grid-template-columns: minmax(0, 1fr);}
    .sm-hero-copy .sm-live-board {padding: 14px 10px;}
}
.sm-photo-carousel .sm-public-gallery {
    position: relative;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 56px) / 5);
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    padding-bottom: 4px;
}
.sm-photo-carousel .sm-public-gallery > figure {scroll-snap-align: start; min-width: 0;}
.sm-strip-controls {display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px;}
.sm-strip-controls[hidden] {display: none;}
@media (max-width: 850px) {
    .sm-photo-carousel .sm-public-gallery {grid-auto-columns: calc((100% - 28px) / 3);}
}
@media (max-width: 600px) {
    .sm-photo-carousel .sm-public-gallery {grid-auto-columns: calc((100% - 14px) / 2);}
}
.sm-hero-copy .sm-live-board {background: rgba(255,255,255,.78);}
.sm-gallery-actions,.sm-community-actions {display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.sm-gallery-actions .sm-strip-controls {margin-top:0;}
.sm-gallery-actions .sm-btn,.sm-community-actions .sm-btn {padding:7px 12px;}
.sm-site .sm-gallery-actions .sm-btn,
.sm-site .sm-guestbook-preview .sm-community-actions .sm-btn,
.sm-site .sm-ranking-link .sm-btn,
.sm-strip-controls button,
.sm-slide-controls button,
.sm-view-controls button {
    border: 0;
    border-radius: 6px;
    background: #375cab;
    color: #fff;
    padding: 8px 12px;
    font: 600 14px/1.3 system-ui, sans-serif;
    cursor: pointer;
}
.sm-site .sm-gallery-actions .sm-community-actions .sm-btn:first-child,
.sm-site .sm-guestbook-preview .sm-community-actions .sm-btn:first-child {background: #5b55a8;}
.sm-site .sm-gallery-actions .sm-community-actions .sm-btn:last-child,
.sm-site .sm-guestbook-preview .sm-community-actions .sm-btn:last-child {background: #f7b93f; color: #302214;}
.sm-site .sm-gallery-actions .sm-btn:hover,
.sm-site .sm-guestbook-preview .sm-community-actions .sm-btn:hover,
.sm-site .sm-ranking-link .sm-btn:hover,
.sm-strip-controls button:hover,
.sm-slide-controls button:hover,
.sm-view-controls button:hover {filter: brightness(.9);}
.sm-message-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;}
.sm-message-grid article {padding:14px;border:1px solid #d5dfd7;border-radius:9px;background:#fff;overflow-wrap:anywhere;}
.sm-message-grid time {display:block;font-size:12px;color:#52695f;}
.sm-message-grid p {margin:7px 0 10px;}
.sm-message-byline {display:flex; align-items:baseline; gap:10px;}
.sm-message-byline time {flex:none;}
.sm-message-excerpts article > p {font-size:calc(1em - 2px);}
.sm-media-hub .sm-gallery-preview:first-child {padding-top: 16px;}
:is(.sm-guestbook-list, .sm-media-hub) .sm-message-grid {grid-template-columns:repeat(4,minmax(0,1fr));}
@media(max-width:900px){
    :is(.sm-guestbook-list, .sm-media-hub) .sm-message-grid {grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:480px){
    :is(.sm-guestbook-list, .sm-media-hub) .sm-message-grid {grid-template-columns:minmax(0,1fr);}
}
.sm-single-message .sm-message-grid {grid-template-columns:minmax(0,1fr); max-width:760px;}
.sm-community textarea {display:block;width:100%;max-width:640px;box-sizing:border-box;margin:8px 0;}
.sm-community form {margin-bottom:20px;}
@media(max-width:700px){
    .sm-message-grid{grid-template-columns:minmax(0,1fr);}
}