/* Kiri Share page. Reuses the homepage's share card and feature cards. */

.sp-hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
@media (max-width: 900px) { .sp-hero { grid-template-columns: 1fr; } }
.sp-tag { background: #D6336C; color: #fff; }
.sp-hero h1 em { color: color-mix(in srgb, #D6336C 70%, var(--ink)); }
.sp-hero h1 em::after { background: #D6336C; }

.sp-log { list-style: none; margin: 14px 0 0; padding: 0; font: 500 12.5px/1 var(--f-mono); }
.sp-log li { display: grid; grid-template-columns: 3.6em minmax(0, 1fr) auto 4.2em; gap: 10px; align-items: center; padding: 10px 6px; border-top: 1px solid var(--line); color: var(--text-2); }
.sp-log li:first-child { border-top: 0; }
.sp-log .m { color: var(--ink); font-weight: 600; }
.sp-log .p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-log .s { padding: 3px 7px; border-radius: 6px; font-size: 11.5px; }
.sp-log .ok { color: var(--moss); background: var(--moss-soft); }
.sp-log .warn { color: #E8913A; background: rgba(232, 145, 58, .14); }
.sp-log .t { text-align: right; color: var(--muted); }
.sp-log li:first-child { animation: sp-in 2.4s ease-out infinite; }
@keyframes sp-in { 0% { background: color-mix(in srgb, #D6336C 14%, transparent); } 60%, 100% { background: transparent; } }

.sp-ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 900px) { .sp-ways { grid-template-columns: 1fr; } }
.sp-way { padding: 26px; background: radial-gradient(90% 60% at 0% 0%, color-mix(in srgb, #D6336C 14%, transparent), transparent 70%), var(--surface); }
.sp-way .ty-n { color: color-mix(in srgb, #D6336C 75%, var(--ink)); margin-bottom: 14px; }
.sp-way h3 { font-size: 24px; margin-bottom: 10px; }
.sp-way p { margin: 0; color: var(--text-2); }
.sp-cmd { margin: 16px 0 0; padding: 14px; border-radius: 12px; background: var(--term-bg); color: var(--term-fg); font: 500 13px/1.7 var(--f-mono); overflow-x: auto; }
.sp-cmd .prompt { color: #F06595; }
.sh-more { margin-top: 24px; }

@media (prefers-reduced-motion: reduce) { .sp-log li:first-child { animation: none; } }