diff --git a/release/obsidian-plugin.html b/release/obsidian-plugin.html
index 5d929da..634af9b 100644
--- a/release/obsidian-plugin.html
+++ b/release/obsidian-plugin.html
@@ -74,6 +74,35 @@
border: 1px solid var(--border);
}
.download-btn.outline:hover { background: var(--accent-light); }
+ .market-btn {
+ background: linear-gradient(135deg, #7c3aed, #6d28d9);
+ position: relative;
+ }
+ .market-btn:hover { opacity: 0.9; }
+ .recommend-tag {
+ background: rgba(255,255,255,0.28);
+ padding: 1px 7px;
+ border-radius: 10px;
+ font-size: 0.72rem;
+ font-weight: 600;
+ margin-left: 2px;
+ }
+ .install-method {
+ background: var(--accent-light);
+ border-left: 4px solid var(--tag-purple);
+ border-radius: var(--radius);
+ padding: 16px 20px;
+ margin: 8px 0 16px;
+ }
+ .install-method h4 {
+ margin: 0 0 6px;
+ color: var(--text);
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ }
+ .install-method p { color: var(--text-secondary); font-size: 0.88rem; margin: 4px 0; }
+ .install-method a { font-weight: 600; }
.container { max-width: 700px; margin: 0 auto; padding: 24px 20px 60px; }
/* Nav */
@@ -298,6 +327,105 @@
.resource-card p { color: var(--text-secondary); font-size: 0.88rem; }
.resource-card a { font-weight: 500; }
+ /* Video grid */
+ .video-grid {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 14px;
+ margin-bottom: 14px;
+ }
+ .video-card {
+ background: var(--surface);
+ border: 1px solid var(--border);
+ border-radius: var(--radius);
+ overflow: hidden;
+ text-decoration: none;
+ color: inherit;
+ display: flex;
+ flex-direction: column;
+ transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
+ }
+ .video-card:hover {
+ transform: translateY(-3px);
+ box-shadow: 0 6px 18px rgba(0,0,0,0.1);
+ border-color: #c8e6ce;
+ }
+ .video-thumb {
+ position: relative;
+ aspect-ratio: 16 / 9;
+ overflow: hidden;
+ background: var(--accent-light);
+ }
+ .video-thumb img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ display: block;
+ transition: transform 0.3s;
+ }
+ .video-card:hover .video-thumb img { transform: scale(1.05); }
+ .video-play {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 44px;
+ height: 44px;
+ background: rgba(0,0,0,0.55);
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transition: background 0.2s, transform 0.2s;
+ }
+ .video-card:hover .video-play {
+ background: rgba(0,0,0,0.72);
+ transform: translate(-50%, -50%) scale(1.08);
+ }
+ .video-play svg { width: 20px; height: 20px; color: #fff; margin-left: 2px; }
+ .video-duration {
+ position: absolute;
+ bottom: 6px;
+ right: 6px;
+ background: rgba(0,0,0,0.75);
+ color: #fff;
+ font-size: 0.72rem;
+ padding: 1px 6px;
+ border-radius: 3px;
+ font-variant-numeric: tabular-nums;
+ letter-spacing: 0.3px;
+ }
+ .video-info {
+ padding: 10px 12px 12px;
+ display: flex;
+ flex-direction: column;
+ gap: 5px;
+ flex: 1;
+ }
+ .video-title {
+ font-size: 0.84rem;
+ font-weight: 600;
+ color: var(--text);
+ line-height: 1.4;
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+ }
+ .video-meta {
+ font-size: 0.74rem;
+ color: var(--text-secondary);
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ margin-top: auto;
+ }
+ .video-platform {
+ color: var(--tag-green-text);
+ font-weight: 600;
+ font-size: 0.72rem;
+ }
+
footer {
text-align: center;
padding: 20px;
@@ -336,6 +464,7 @@
.card { padding: 18px 16px; }
.feature-grid { grid-template-columns: 1fr; }
.nav a { font-size: 0.8rem; padding: 8px 6px; }
+ .video-grid { grid-template-columns: 1fr; }
}
@@ -343,17 +472,23 @@