/* Visible catalogue: every mode is a link, with a complete animated thumbnail. */
.sr-mode-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:24px;margin-bottom:24px;align-items:stretch}
.sr-mode-card{display:flex;flex-direction:column;min-width:0;padding:27px;border:1px solid #d6b67538;border-radius:26px;background:radial-gradient(ellipse at 10% 0,#d9b66e0c,transparent 55%),linear-gradient(145deg,#181510,#0e0d0b 65%);box-shadow:inset 0 1px #ffe4a912,0 12px 35px #00000017;overflow:hidden}
.sr-mode-header{flex:none;min-height:126px;margin-bottom:22px;padding-bottom:21px;border-bottom:1px solid #d6b67522}
.sr-mode-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:15px;min-height:25px}
.sr-mode-number{display:block;font-size:10px;line-height:1.4;letter-spacing:.13em;color:#c8ad77}
.sr-mode-count{flex:none;font-size:10px;line-height:1.4;color:#c6b58f;border:1px solid #d6b6752b;border-radius:20px;padding:5px 9px;background:#d6b67507;white-space:nowrap}
.sr-mode-card h3{font-size:30px;line-height:1.12;letter-spacing:-.04em;color:#f5eddd;text-wrap:balance}
.sr-mode-card .sr-mode-header>p{font-size:13px;line-height:1.55;color:#a79d8b;margin:11px 0 0;max-width:none}
.sr-mode-list{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(var(--mode-rows),minmax(min-content,1fr));flex:1;gap:12px;padding:0;margin:0}
.sr-mode-list>li{display:flex;min-width:0;margin:0;padding:0}
.sr-mode-item{position:relative;display:grid;grid-template-columns:70px minmax(0,1fr);align-items:center;gap:12px;width:100%;min-width:0;min-height:142px;padding:12px;border:1px solid #d6b67524;border-radius:16px;background:linear-gradient(130deg,#ffffff04,#ffffff01);box-shadow:inset 0 1px #ffffff04;transition:border-color .25s,background .25s,transform .25s}
.sr-mode-item:hover{border-color:#e6c47c78;background:#d7b7740c;transform:translateY(-2px)}
.sr-mode-item:focus-visible{outline:2px solid #e9ca85;outline-offset:4px}
.sr-mode-icon{display:block;position:relative;isolation:isolate;width:100%;height:100%;min-height:102px;max-height:172px;border-radius:10px;overflow:hidden;background:radial-gradient(ellipse,#2e2618 0%,#080807 78%);border:1px solid #d6b6751c}
.sr-mode-icon>img,.sr-mode-icon>video,.sr-design-before>img,.sr-design-after>img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain!important;object-position:center!important;transform:none!important}
.sr-mode-icon>video{opacity:0;transition:opacity .3s}
.sr-mode-item.is-preview-ready .sr-mode-icon>video{opacity:1}
.sr-mode-copy{display:flex;flex-direction:column;gap:8px;min-width:0;padding:8px 2px 15px}
.sr-mode-copy>strong{font-size:14px;line-height:1.3;letter-spacing:-.02em;font-weight:550;color:#f2e9d9;overflow-wrap:break-word}
.sr-mode-copy>span:not(.sr-mode-demo){font-size:11.5px;line-height:1.5;color:#a89f8e}
.sr-mode-direction{position:absolute;right:10px;bottom:8px;font-size:14px;color:#d4b979;line-height:1;opacity:.7}
.sr-mode-item:hover .sr-mode-direction{opacity:1}
.sr-mode-demo{display:block;width:100%;margin-top:2px;padding-top:5px;border-top:1px solid #d6b6751b}
.sr-mode-demo>svg{display:block;width:100%;height:29px;max-width:176px;overflow:hidden}
.sr-mode-genjutsu .sr-mode-item{display:flex;flex-direction:column;align-items:stretch;padding:12px;gap:18px}
.sr-mode-genjutsu .sr-mode-icon{flex:1;height:auto;min-height:242px;max-height:none}
.sr-mode-genjutsu .sr-mode-copy{padding:0 5px 10px;gap:8px}
.sr-mode-genjutsu .sr-mode-copy>strong{font-size:19px}
.sr-mode-genjutsu .sr-mode-copy>span{font-size:12px}
.sr-mode-genjutsu .sr-mode-direction{right:16px;bottom:16px}
.sr-mode-design .sr-mode-list{grid-template-columns:1fr}
.sr-mode-design .sr-mode-item{grid-template-columns:91px minmax(0,1fr);min-height:122px;padding:12px 15px;gap:19px}
.sr-mode-design .sr-mode-copy>strong{font-size:16px}
.sr-mode-design .sr-mode-copy>span{font-size:12px}
.sr-design-before,.sr-design-after{position:absolute;inset:0;display:block}
.sr-design-after{background:#090806;clip-path:inset(0 100% 0 0);animation:sr-design-wipe 8s cubic-bezier(.65,0,.35,1) infinite paused}
.sr-mode-item.is-preview-active .sr-design-after{animation-play-state:running}
@keyframes sr-design-wipe{0%,15%,100%{clip-path:inset(0 100% 0 0)}40%,75%{clip-path:inset(0 0 0 0)}}
.sr-preview-toolbar{margin:0 0 36px}
@media(max-width:1200px){
 .sr-mode-card{padding:22px}.sr-mode-card h3{font-size:27px}.sr-mode-item{grid-template-columns:58px minmax(0,1fr);gap:9px;padding:10px}.sr-mode-copy>strong{font-size:13px}.sr-mode-copy>span:not(.sr-mode-demo){font-size:11px}.sr-mode-genjutsu .sr-mode-icon{min-height:236px}
}
@media(max-width:960px){
 .sr-mode-grid{grid-template-columns:1fr;grid-auto-rows:auto;align-items:start;gap:20px}
 .sr-mode-card{padding:24px}.sr-mode-header{min-height:0;margin-bottom:18px;padding-bottom:18px}.sr-mode-card h3{font-size:30px}
 .sr-mode-list{flex:none;grid-template-rows:none;grid-auto-rows:auto}
 .sr-mode-item{grid-template-columns:78px minmax(0,1fr);min-height:134px;padding:12px;gap:14px}.sr-mode-copy>strong{font-size:16px}.sr-mode-copy>span:not(.sr-mode-demo){font-size:12px}
 .sr-mode-icon{height:110px;min-height:0;max-height:none}
 .sr-mode-genjutsu .sr-mode-icon{flex:none;height:240px;min-height:0}.sr-mode-demo>svg{height:32px}
}
@media(max-width:540px){
 .sr-mode-card{padding:18px 14px;border-radius:22px}.sr-mode-header{margin:0 4px 16px;min-height:0;padding-bottom:16px}.sr-mode-meta{gap:8px;margin-bottom:12px}.sr-mode-number{font-size:9px}.sr-mode-count{font-size:9px;padding:4px 8px}.sr-mode-card h3{font-size:27px}.sr-mode-card .sr-mode-header>p{font-size:12px;margin-top:9px}
 .sr-mode-list{gap:9px}.sr-mode-item{display:flex;flex-direction:column;align-items:stretch;gap:11px;padding:10px;min-height:0;border-radius:13px}
 .sr-mode-icon{height:110px;min-height:110px;max-height:none}.sr-mode-copy{gap:6px;padding:0 2px 14px;flex:1}.sr-mode-copy>strong{font-size:14px;line-height:1.3}.sr-mode-copy>span:not(.sr-mode-demo){font-size:11.5px;line-height:1.45}.sr-mode-demo{margin-top:auto;padding-top:8px}.sr-mode-demo>svg{height:28px}
 .sr-mode-advertising .sr-mode-icon{flex:none;min-height:110px}
 .sr-mode-genjutsu .sr-mode-icon{height:170px;min-height:0}.sr-mode-genjutsu .sr-mode-copy{flex:none}.sr-mode-genjutsu .sr-mode-copy>strong{font-size:16px}.sr-mode-genjutsu .sr-mode-copy>span{font-size:11.5px}.sr-mode-genjutsu .sr-mode-copy{padding:0 2px 13px}
 .sr-mode-design .sr-mode-item{display:grid;grid-template-columns:78px minmax(0,1fr);gap:15px;min-height:118px}.sr-mode-design .sr-mode-icon{height:96px}.sr-mode-design .sr-mode-copy{padding:0 10px 0 0}.sr-mode-design .sr-mode-copy>strong{font-size:15px}.sr-mode-design .sr-mode-copy>span{font-size:11.5px}
}
@media(max-width:359px){.sr-mode-card{padding:18px 11px}.sr-mode-card h3{font-size:25px}.sr-mode-item{padding:8px}.sr-mode-icon{height:96px;min-height:0}.sr-mode-copy>strong{font-size:13px}.sr-mode-genjutsu .sr-mode-icon{height:145px;min-height:0}.sr-mode-genjutsu .sr-mode-copy>strong{font-size:15px}}

/* Existing miniapp SVG motion, scoped to the public catalogue. */
.sr-mode-demo text { font-family: inherit; font-size: 11px; font-weight: 600; text-anchor: middle; fill: #dfc48e; }
.sr-mode-demo .cv-demo-label { text-anchor: start; font-size: 8px; letter-spacing: .5px; fill: #a99c82; }
.sr-mode-demo rect { fill: #b8955124; }
.sr-mode-demo .cv-demo-line { fill: none; stroke: #b99a62; stroke-width: 1.2; }
.sr-mode-demo .cv-demo-track { fill: #a88c4f24; }
.sr-mode-demo .cv-demo-word rect { stroke: #c2a06335; }
.sr-mode-demo .cv-demo-word { animation: cv-studio-word 3.6s ease-in-out infinite paused; }
.sr-mode-demo .cv-demo-word-two { animation-delay: -2.4s; }
.sr-mode-demo .cv-demo-word-three { animation-delay: -1.2s; }
.sr-mode-demo .cv-demo-clip, .sr-mode-demo .cv-demo-pack { animation: cv-studio-reveal 4s ease-in-out infinite paused; }
.sr-mode-demo .cv-demo-step-two { animation-delay: .3s; }
.sr-mode-demo .cv-demo-step-three { animation-delay: .6s; }
.sr-mode-demo .cv-demo-scan { fill: #f3d398; animation: cv-studio-scan 4s ease-in-out infinite paused; }
.sr-mode-demo .cv-demo-bar { fill: #d6b777; transform-box: fill-box; transform-origin: center; animation: cv-studio-wave 1.6s ease-in-out infinite paused; animation-delay: calc(var(--beat) * -.24s); }
.sr-mode-demo .cv-demo-wave-source { opacity: .45; }
.sr-mode-demo .cv-demo-wave-result .cv-demo-bar { animation-direction: reverse; }
.sr-mode-demo .cv-demo-speech { fill: #d9b974; }
.sr-mode-demo .cv-demo-gap-one { animation: cv-studio-gap-one 4s ease-in-out infinite paused; }
.sr-mode-demo .cv-demo-gap-two { animation: cv-studio-gap-two 4s ease-in-out infinite paused; }
.sr-mode-demo .cv-demo-pause-mark { stroke: #8a7c63; animation: cv-studio-pause 4s ease-in-out infinite paused; }
.sr-mode-demo .cv-demo-language { animation: cv-studio-language 6s linear infinite paused; }
.sr-mode-demo .cv-demo-language-en { opacity: 0; animation-delay: -4s; }
.sr-mode-demo .cv-demo-language-es { opacity: 0; animation-delay: -2s; }
.sr-mode-demo .cv-demo-phrase { text-anchor: start; fill: #f4eddb; font-weight: 500; }
.sr-mode-demo .cv-demo-pack path { fill: none; stroke: #d6b777; stroke-width: 1; }
.sr-mode-demo .cv-demo-copy { transform-origin: 83px 22px; animation: cv-studio-copy 4s ease-in-out infinite paused; }
.sr-mode-demo .cv-demo-copy rect { fill: #d1b17088; }
.sr-mode-item.is-preview-active .sr-mode-demo * { animation-play-state: running; }
@keyframes cv-studio-word { 0%, 27% { opacity: 1; } 36%, 92% { opacity: .38; } 100% { opacity: 1; } }
@keyframes cv-studio-reveal { 0%, 10%, 100% { opacity: .35; transform: translateY(2px); } 25%, 85% { opacity: 1; transform: translateY(0); } }
@keyframes cv-studio-scan { 0%, 8% { transform: translateX(0); opacity: 0; } 15% { opacity: 1; } 80% { transform: translateX(59px); opacity: 1; } 90%, 100% { transform: translateX(59px); opacity: 0; } }
@keyframes cv-studio-wave { 0%, 100% { transform: scaleY(.65); } 50% { transform: scaleY(1); } }
@keyframes cv-studio-gap-one { 0%, 18%, 100% { transform: translateX(0); } 45%, 82% { transform: translateX(-20px); } }
@keyframes cv-studio-gap-two { 0%, 18%, 100% { transform: translateX(0); } 45%, 82% { transform: translateX(-40px); } }
@keyframes cv-studio-pause { 0%, 18%, 100% { opacity: 1; } 38%, 82% { opacity: 0; } }
@keyframes cv-studio-language { 0%, 28% { opacity: 1; } 33%, 95% { opacity: 0; } 100% { opacity: 1; } }
@keyframes cv-studio-copy { 0%, 15%, 100% { transform: scaleX(.35); opacity: .35; } 50%, 85% { transform: scaleX(1); opacity: 1; } }

@media(prefers-reduced-motion:reduce){.sr-mode-item,.sr-mode-item *{animation:none!important;transition:none!important}.sr-design-after{clip-path:inset(0 0 0 50%)}.sr-mode-item:hover{transform:none}}