.icon-sprite{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}.icon{display:inline-block;width:1.15em;height:1.15em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.16em;flex-shrink:0;pointer-events:none}
button>.icon{margin-right:.35em}button>.icon:last-child{margin-right:0}button:has(>.icon){display:inline-flex;align-items:center;justify-content:center;gap:6px}.circle-link b>.icon{width:22px;height:22px}.circle-link b{color:inherit}.text-button .icon,.outline-button .icon,.back-top .icon,.together-note>a .icon{width:14px;height:14px;margin-left:6px}.soundtrack-mark>.icon{width:38px;height:38px}.together-since .icon{width:10px;height:10px}.sound>.icon{width:17px;height:17px;margin:0}.sound.on>.icon{animation:music-breathe 1.2s ease-in-out infinite alternate}@keyframes music-breathe{to{opacity:.45}}
/* The outer dialog always matches the device viewport. Only this inner canvas rotates. */
#viewer[open]{display:block}#viewer{padding:0;background:#171c17;isolation:isolate;height:100dvh;max-height:100dvh}.viewer-canvas{position:absolute;inset:0;overflow:hidden;background:#171c17;color:#eee9dd;transform:none;touch-action:none}.landscape-fixed .viewer-canvas{inset:auto;left:50%;top:50%;width:var(--screen-height);height:var(--screen-width);transform:translate(-50%,-50%) rotate(90deg);transform-origin:center}
.viewer-canvas .viewer-stage{position:absolute;inset:0;padding:0;display:block;overflow:hidden;z-index:0;perspective:none}.viewer-canvas .photo-stack{position:absolute;inset:0;width:100%;height:100%;min-height:0;flex:none;touch-action:none;perspective:none}.viewer-canvas .photo-stack #viewer-image{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:none;transform-origin:center}.viewer-canvas .photo-stack #photo-load-status{color:#bbc7a7}.viewer-canvas .swipe-hint{display:none}
.viewer-canvas .viewer-top{position:absolute;top:0;left:0;right:0;height:64px;min-height:0;padding:8px 16px;display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;background:linear-gradient(#171c17c9,#171c1700);z-index:4;pointer-events:none}.viewer-canvas .viewer-top .viewer-brand{font-size:27px;color:#f4f0e7}.viewer-canvas .viewer-top .viewer-brand i{display:inline;font-size:17px;margin:0 8px}.viewer-canvas .viewer-top #close-viewer{display:inline-flex;min-width:44px;min-height:44px;margin:0;padding:10px;color:#f4f0e7;pointer-events:auto}.viewer-canvas #close-viewer .icon{width:23px;height:23px;margin:0}
.viewer-canvas .viewer-meta{position:absolute;left:310px;right:75px;top:16px;min-height:32px;padding:0;display:flex;align-items:center;flex-wrap:nowrap;gap:14px;z-index:4;pointer-events:none;color:#bbc5ab}.viewer-canvas .viewer-meta>div,.viewer-canvas .viewer-meta>div:first-child{display:flex;flex-direction:row;align-items:center;gap:14px}.viewer-canvas .viewer-meta .viewer-song{font-size:10px;max-width:240px;white-space:nowrap;color:#dbe2cb}.viewer-canvas .viewer-meta #sync-status{font-size:9px;color:#bbc5ab;opacity:1}.viewer-canvas .viewer-meta>button{min-height:32px;padding:5px 10px;font-size:10px;flex-shrink:0;color:#d7e7bb;border-color:#b7c69c50;pointer-events:auto;background:#17201760}
.viewer-canvas .viewer-controls{position:absolute;bottom:0;left:0;right:0;min-height:0;display:flex;justify-content:center;align-items:center;gap:8px;padding:22px 16px 12px;border:0;background:linear-gradient(#171c1700,#171c17e8 45%);z-index:4}.viewer-canvas .viewer-controls button,.viewer-canvas .viewer-controls .viewer-prev,.viewer-canvas .viewer-controls .viewer-next,.viewer-canvas .viewer-controls #viewer-sound,.viewer-canvas .viewer-controls #speed{display:inline-flex;position:static;min-width:44px;min-height:44px;padding:7px 13px;font-size:12px;align-items:center;justify-content:center;gap:7px;border-radius:24px;line-height:1.5;color:#eee9dd;white-space:nowrap}.viewer-canvas .viewer-controls button .icon{width:17px;height:17px;margin:0}.viewer-canvas .viewer-controls #autoplay{min-width:118px;min-height:44px;padding:7px 16px;display:inline-flex;align-items:center;justify-content:center;gap:7px;border-radius:24px;font-size:12px;background:#e0e7cf;color:#2c3a28}.viewer-canvas .viewer-controls #speed{border-color:#b7c69c55;background:#17201755}.viewer-canvas .viewer-controls button:active{background:#c9d5b622}.viewer-canvas .viewer-stage #viewer-counter{position:absolute;left:0;right:0;bottom:77px;height:auto;margin:0;padding:4px;text-align:center;font-size:10px;letter-spacing:1.5px;color:#eee9dd;text-shadow:0 1px 5px #171c17;z-index:3;pointer-events:none}.viewer-canvas .slide-progress{position:absolute;bottom:0;left:0;right:0;height:2px;background:#b4c29c;z-index:5}
.viewer-canvas .viewer-thumbs{position:absolute;bottom:100px;left:20px;right:20px;z-index:4;background:#171c17dd;border:1px solid #b7c69c55;border-radius:6px;padding:9px 12px;height:74px}.thumbs-open .viewer-canvas .viewer-thumbs{display:flex}.thumbs-open .viewer-canvas #viewer-counter{bottom:181px}.viewer-canvas .viewer-thumbs img{width:80px;height:48px}.viewer-canvas .viewer-thumbs button{min-width:80px;min-height:50px}.viewer-canvas .viewer-thumbs button.selected{border-color:#bbc5ab}.viewer-canvas .viewer-prev span,.viewer-canvas .viewer-next span{display:inline}
.viewer-canvas .viewer-top,.viewer-canvas .viewer-meta,.viewer-canvas .viewer-controls,.viewer-canvas .viewer-stage #viewer-counter,.viewer-canvas .slide-progress{transition:opacity .25s ease}.controls-hidden .viewer-canvas .viewer-top,.controls-hidden .viewer-canvas .viewer-meta,.controls-hidden .viewer-canvas .viewer-controls,.controls-hidden .viewer-canvas .viewer-stage #viewer-counter,.controls-hidden .viewer-canvas .slide-progress{opacity:0;visibility:hidden;pointer-events:none}.controls-hidden .viewer-canvas .viewer-top *, .controls-hidden .viewer-canvas .viewer-meta *{pointer-events:none}
#viewer.handheld .viewer-canvas .viewer-top{height:50px;padding:2px 11px}#viewer.handheld .viewer-canvas .viewer-top .viewer-brand{font-size:23px}#viewer.handheld .viewer-canvas .viewer-meta{top:8px;left:260px;right:65px}#viewer.handheld .viewer-canvas .viewer-meta #sync-status{display:none}#viewer.handheld .viewer-canvas .viewer-meta .viewer-song{font-size:9px;max-width:180px}#viewer.handheld .viewer-canvas .viewer-meta>button{font-size:9px;min-height:30px;padding:5px 10px}
#viewer.handheld .viewer-canvas .viewer-controls{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px;padding:15px 8px 6px}#viewer.handheld .viewer-canvas .viewer-controls button,#viewer.handheld .viewer-canvas .viewer-controls #autoplay,#viewer.handheld .viewer-canvas .viewer-controls #speed,#viewer.handheld .viewer-canvas .viewer-controls #viewer-sound,#viewer.handheld .viewer-canvas .viewer-controls .viewer-prev,#viewer.handheld .viewer-canvas .viewer-controls .viewer-next{min-width:0;min-height:44px;padding:5px 3px;font-size:10px;gap:5px}#viewer.handheld .viewer-canvas .viewer-controls .viewer-prev span,#viewer.handheld .viewer-canvas .viewer-controls .viewer-next span{display:none}#viewer.handheld .viewer-canvas .viewer-stage #viewer-counter{bottom:66px;font-size:9px}#viewer.handheld.thumbs-open .viewer-canvas #viewer-counter{bottom:151px}#viewer.handheld .viewer-canvas .viewer-thumbs{bottom:86px;height:61px;padding:5px 10px}#viewer.handheld .viewer-canvas .viewer-thumbs img{width:68px;height:44px}#viewer.handheld .viewer-canvas .viewer-thumbs button{min-width:68px;min-height:46px}
@media(prefers-reduced-motion:reduce){.sound.on>.icon{animation:none}}

#viewer.handheld .viewer-canvas .viewer-top{padding-left:calc(11px + env(safe-area-inset-left));padding-right:calc(11px + env(safe-area-inset-right))}#viewer.handheld .viewer-canvas .viewer-controls{padding-left:calc(8px + env(safe-area-inset-left));padding-right:calc(8px + env(safe-area-inset-right))}#viewer.handheld.landscape-fixed .viewer-canvas .viewer-top{padding-left:calc(11px + env(safe-area-inset-top));padding-right:calc(11px + env(safe-area-inset-bottom))}#viewer.handheld.landscape-fixed .viewer-canvas .viewer-controls{padding-left:calc(8px + env(safe-area-inset-top));padding-right:calc(8px + env(safe-area-inset-bottom))}
.track-row select{appearance:none;-webkit-appearance:none;background-image:url('assets/select-chevron.svg');background-repeat:no-repeat;background-position:right 13px center;background-size:15px 15px;padding-right:36px}