.short-page .short-hero { display: grid; grid-template-columns: minmax(220px, 360px) minmax(0, 1fr); gap: clamp(30px, 6vw, 80px); align-items: center; padding: 8px 0 30px; }
.short-page .short-watch { width: 100%; max-width: min(360px, 42.75svh); justify-self: center; }
.short-page .watch-layout--portrait { grid-template-columns: minmax(280px, 360px) minmax(320px, 1fr); gap: clamp(30px, 5vw, 70px); max-width: 980px; margin-inline: auto; }
.short-page .watch-layout--portrait .short-watch { max-width: 360px; justify-self: stretch; }
.short-page .chapter-panel--stages .chapter-list { max-height: none; }
.short-page .chapter-panel--stages .chapter-list a { grid-template-columns: 48px 1fr 12px; align-items: start; }
.short-page .chapter-panel--stages .chapter-list span { display: grid; gap: 3px; }
.short-page .chapter-panel--stages .chapter-list strong { font-size: 14px; }
.short-page .chapter-panel--stages .chapter-list small { color: var(--subtle); font-size: 12px; }
.short-page .chapter-aside__note { margin: 0; padding: 18px 20px; border-left: 3px solid #96ac88; color: var(--subtle); font-size: 15px; line-height: 1.6; }
.short-page .short-copy h1 { max-width: 18ch; }
.short-page .short-copy h1 em { color: #84652a; }
.short-page .short-copy > p:not(.eyebrow) { max-width: 53ch; color: var(--subtle); }
.short-page .short-points { margin: 25px 0; border-top: 1px solid var(--rule); }
.short-page .short-points p { font-size: 17px; margin: 0; padding: 13px 0; border-bottom: 1px solid var(--rule); color: var(--subtle); }
.short-page .short-points strong { color: var(--ink); }
.short-page .local-video-preview { padding: 22px; }
.short-page .local-video-preview strong { font-size: clamp(24px, 3vw, 34px); line-height: 1.25; }
.short-page .local-video-preview p { font-size: 14px; }
.short-page .pair-symbol { display: flex; gap: 18px; margin: 24px 0; }
.short-page .pair-symbol span { display: grid; place-items: center; width: 58px; height: 58px; border: 1px solid #8cc4b9; border-radius: 50%; font-size: 36px; font-weight: 400; letter-spacing: 0; }
.short-page .particle-figure { margin: 0 0 25px; background: #e9ede3; border-radius: 10px; padding: 32px 20px 20px; }
.short-page .particle-diagram { display: flex; justify-content: center; align-items: center; gap: clamp(12px, 5vw, 70px); }
.short-page .particle-diagram > div { display: grid; justify-items: center; gap: 8px; }
.short-page .particle { display: grid; place-items: center; width: 100px; height: 100px; border-radius: 50%; font-size: 58px; line-height: 1; margin-bottom: 8px; }
.short-page .electron { background: #234d44; color: #f6f4ed; }
.short-page .positron { background: #ecd193; color: #203b35; }
.short-page .pair-bridge { border-block: 1px solid #bccab6; padding: 10px 0; font-size: 15px; }
.short-page .particle-diagram small, .short-page .particle-figure figcaption { font-size: 13px; color: var(--subtle); }
.short-page .particle-figure figcaption { text-align: center; margin-top: 25px; }
@media (max-width: 760px) { .short-page .short-hero { grid-template-columns: 1fr; gap: 24px; } .short-page .watch-layout--portrait { grid-template-columns: 1fr; max-width: 100%; } .short-page .watch-layout--portrait .short-watch { width: 100%; max-width: min(330px, 39.375svh); justify-self: center; } .short-page .short-copy h1 { max-width: 100%; } .short-page .short-watch #chapter-status { font-size: 12px; } }
@media (max-width: 400px) { .short-page .particle { width: 68px; height: 68px; font-size: 42px; } .short-page .particle-diagram { gap: 12px; } .short-page .pair-bridge { font-size: 12px; } .short-page .particle-diagram small { font-size: 11px; } }