.shorts-viewer{position:fixed;inset:0;z-index:200;background:var(--color-bg);overflow:hidden;overscroll-behavior:none}.shorts-header{position:absolute;top:0;left:0;right:0;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;background:linear-gradient(to bottom,#fffffff2 60%,#fff0)}.shorts-header__cat-name{font-size:.8125rem;font-weight:700;font-family:var(--font-heading);color:var(--color-text)}.shorts-header__back{display:flex;align-items:center;gap:.375rem;color:var(--color-text);text-decoration:none;font-size:.875rem;font-weight:500}.shorts-header__back:hover{color:var(--color-primary);text-decoration:none}.shorts-header__counter{font-size:.75rem;color:var(--color-text-muted);background:#fffc;padding:.25rem .75rem;border-radius:var(--radius-full)}.shorts-subtag-filter{position:absolute;top:3rem;left:0;right:0;z-index:10;display:flex;gap:.375rem;padding:.5rem 1rem;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;touch-action:pan-x}.shorts-subtag-filter::-webkit-scrollbar{display:none}.shorts-subtag-filter__chip{flex-shrink:0;padding:.25rem .75rem;font-size:.6875rem;font-family:var(--font-sans);color:var(--color-text-muted);background:var(--color-border-light);border:1px solid var(--color-border);border-radius:var(--radius-full);cursor:pointer;transition:background .15s,color .15s,border-color .15s;white-space:nowrap}.shorts-subtag-filter__chip:hover{border-color:var(--color-primary);color:var(--color-primary)}.shorts-subtag-filter__chip--active{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}.shorts-subtag-filter__chip--active:hover{color:#fff}.shorts-slides{position:absolute;inset:0;will-change:transform;touch-action:none;overscroll-behavior:none}.shorts-slides--animating{transition:transform .3s cubic-bezier(.4,0,.2,1)}.shorts-slide{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:5rem 1.5rem 6rem;text-align:center;overflow:hidden}.shorts-slide__emoji{font-size:3.5rem;margin-bottom:1.25rem;line-height:1}.shorts-slide__title{font-size:1.375rem;font-weight:700;font-family:var(--font-heading);line-height:1.4;margin-bottom:1rem;color:var(--color-text);max-width:500px}.shorts-slide__body{font-size:1rem;line-height:1.8;color:var(--color-text);max-width:500px;text-align:left}.shorts-slide__body :is(p){margin:0}.shorts-slide__tags{display:flex;flex-wrap:wrap;gap:.375rem;justify-content:center;margin-top:1.25rem}.shorts-slide__tag{font-size:.75rem;color:var(--color-primary);background:var(--color-primary-light);padding:.1875rem .625rem;border-radius:var(--radius-full)}.shorts-slide__source{font-size:.6875rem;color:var(--color-text-muted);margin-top:.75rem}.shorts-slide__source a{color:var(--color-text-muted);text-decoration:underline}.shorts-slide__date{font-size:.6875rem;color:var(--color-text-muted);margin-top:.5rem}.shorts-detail-link{position:absolute;bottom:4rem;left:50%;transform:translate(-50%);z-index:20;padding:.625rem 1.5rem;font-size:.875rem;font-weight:600;color:#fff;background:var(--color-primary);border-radius:var(--radius-full);text-decoration:none;box-shadow:0 4px 12px #00000026;touch-action:manipulation;-webkit-tap-highlight-color:rgba(255,255,255,.2);transition:background .15s,transform .15s,box-shadow .15s;white-space:nowrap}.shorts-detail-link:hover{background:var(--color-primary-hover);text-decoration:none;color:#fff;transform:translate(-50%) translateY(-2px);box-shadow:0 6px 16px #0000002e}.shorts-detail-link:active{transform:translate(-50%) translateY(0)}.shorts-detail-link[hidden]{display:none}.shorts-slide__read-badge{position:absolute;top:4rem;right:1rem;font-size:.6875rem;color:var(--color-text-muted);background:var(--color-border-light);padding:.1875rem .5rem;border-radius:var(--radius-full)}.shorts-footer{position:absolute;bottom:0;left:0;right:0;z-index:10;display:flex;align-items:center;justify-content:center;padding:1rem;background:linear-gradient(to top,#fffffff2,#fff0)}.shorts-footer__hint{font-size:.75rem;color:var(--color-text-muted);display:flex;align-items:center;gap:.375rem;animation:shorts-hint-bounce 2s ease-in-out infinite}.shorts-footer__hint--desktop{animation:none}.shorts-footer__hint kbd{display:inline-flex;align-items:center;justify-content:center;min-width:1.5em;padding:.05em .35em;margin:0 .1em;font-family:var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);font-size:.85em;color:var(--color-text);background:#fff;border:1px solid var(--color-border);border-bottom-width:2px;border-radius:4px;line-height:1.2}.shorts-footer__detail-link{font-size:.75rem;color:var(--color-text-muted);text-decoration:none;padding:.25rem .75rem;border:1px solid var(--color-border);border-radius:var(--radius-full);transition:border-color .15s,color .15s}.shorts-footer__detail-link:hover{border-color:var(--color-primary);color:var(--color-primary);text-decoration:none}@keyframes shorts-hint-bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}.shorts-slide--end{gap:1rem}.shorts-slide--end .shorts-slide__emoji{font-size:3rem}.shorts-slide--end .shorts-slide__title{font-size:1.125rem;color:var(--color-text-muted)}.shorts-end__link{display:inline-block;padding:.75rem 2rem;background:var(--color-primary);color:#fff;border-radius:var(--radius-md);font-weight:700;font-family:var(--font-heading);text-decoration:none;transition:background .15s,transform .15s}.shorts-end__link:hover{background:var(--color-primary-hover);transform:translateY(-2px);text-decoration:none;color:#fff}.shorts-tutorial{position:absolute;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s ease-out;pointer-events:none}.shorts-tutorial--visible{opacity:1}.shorts-tutorial--hiding{opacity:0}.shorts-tutorial__backdrop{position:absolute;inset:0;background:#0f0f198c;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);pointer-events:none}.shorts-tutorial__card{position:relative;pointer-events:auto;display:flex;flex-direction:column;align-items:center;gap:.75rem;max-width:300px;padding:1.75rem 1.5rem 1.25rem;background:#fff;border-radius:var(--radius-lg, 12px);box-shadow:0 20px 48px #00000040;transform:translateY(8px);transition:transform .3s ease-out}.shorts-tutorial--visible .shorts-tutorial__card{transform:translateY(0)}.shorts-tutorial__stage{position:relative;width:88px;height:128px;margin-bottom:.25rem}.shorts-tutorial__hand{position:absolute;left:50%;bottom:0;transform:translate(-50%);font-size:3rem;line-height:1;animation:shorts-tutorial-hand 1.8s ease-in-out infinite}.shorts-tutorial__arrow{position:absolute;left:50%;transform:translate(-50%);font-size:1.25rem;line-height:1;color:var(--color-primary, #6366f1);font-weight:700;opacity:0;animation:shorts-tutorial-arrow 1.8s ease-in-out infinite}.shorts-tutorial__arrow--1{top:48px;animation-delay:.2s}.shorts-tutorial__arrow--2{top:24px;animation-delay:.45s}.shorts-tutorial__arrow--3{top:0;animation-delay:.7s}.shorts-tutorial__title{font-size:1.0625rem;font-weight:700;font-family:var(--font-heading);color:var(--color-text);margin:0;text-align:center}.shorts-tutorial__text{font-size:.8125rem;line-height:1.6;color:var(--color-text-muted);margin:0;text-align:center}.shorts-tutorial__dismiss{margin-top:.5rem;padding:.625rem 2rem;background:var(--color-primary, #6366f1);color:#fff;border:none;border-radius:var(--radius-full);font-size:.875rem;font-weight:700;font-family:var(--font-heading);cursor:pointer;transition:background .15s,transform .15s}.shorts-tutorial__dismiss:hover{background:var(--color-primary-hover, #4f46e5);transform:translateY(-1px)}.shorts-tutorial__dismiss:active{transform:translateY(0)}.shorts-tutorial--desktop .shorts-tutorial__stage{display:flex;align-items:center;justify-content:center;width:auto;height:72px;font-size:3rem;margin-bottom:0}.shorts-tutorial--desktop .shorts-tutorial__hand,.shorts-tutorial--desktop .shorts-tutorial__arrow{display:none}.shorts-tutorial__text kbd{display:inline-flex;align-items:center;justify-content:center;min-width:1.5em;padding:.05em .4em;margin:0 .15em;font-family:var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);font-size:.9em;color:var(--color-text);background:#fff;border:1px solid var(--color-border);border-bottom-width:2px;border-radius:4px;line-height:1.2}@keyframes shorts-tutorial-hand{0%{transform:translate(-50%) translateY(0)}50%{transform:translate(-50%) translateY(-56px)}75%{transform:translate(-50%) translateY(-56px);opacity:.4}to{transform:translate(-50%) translateY(0);opacity:1}}@keyframes shorts-tutorial-arrow{0%,15%{opacity:0;transform:translate(-50%) translateY(6px)}45%{opacity:1;transform:translate(-50%) translateY(0)}75%,to{opacity:0;transform:translate(-50%) translateY(-4px)}}@media(prefers-reduced-motion:reduce){.shorts-slides--animating{transition-duration:.01ms}.shorts-footer__hint,.shorts-tutorial__hand,.shorts-tutorial__arrow{animation:none}.shorts-tutorial__arrow{opacity:1}}@media(min-width:768px){.shorts-slide{padding:5rem 2rem 6rem}.shorts-slide__title{font-size:1.625rem}.shorts-slide__body{font-size:1.0625rem}}