/* A quiet image stage and one compact control bar. */
#balance-panel #balance-title{font-family:'Nunito',sans-serif;font-weight:750;line-height:1.18;letter-spacing:-.035em}
#balance-panel .balance-choices{display:flex;gap:3px;padding:4px;border:1px solid #d9dfd0;border-radius:17px;background:#e9edde}
#balance-panel .balance-choices button{flex:1;min-width:0;min-height:44px;border:1px solid transparent;border-radius:12px;background:transparent;color:#61725a;font-weight:750;box-shadow:none;transform:none;translate:none;transition:background .25s,color .25s,border-color .25s}
#balance-panel .balance-choices button[aria-pressed=true]{background:#fffdf6;border-color:#d3dcc7;color:#264b3c;box-shadow:0 2px 5px #263e2610}
#balance-panel #balance-toggle{box-shadow:none!important;border:1px solid #2c5543;border-radius:15px!important;font-weight:750;transform:none;translate:none}
#balance-panel #balance-panda{min-height:44px;margin-top:5px;color:#65765c;font-weight:650;transform:none;translate:none;transition:color .25s}
#balance-panel button:focus-visible{outline:2px solid #b47755;outline-offset:3px}
@media(hover:hover) and (pointer:fine){#balance-panel .balance-choices button:hover{color:#264b3c;border-color:#c5d2b9}#balance-panel #balance-panda:hover{color:#9e653f}}
@media(prefers-reduced-motion:reduce){#balance-panel button{transition:none!important}}
#viewer[open],#viewer[data-kind=portrait][open]{display:grid;grid-template-rows:64px minmax(0,1fr) auto auto;background:#f8f5ed}
#viewer .viewer-top{padding:0 30px;gap:20px;background:#f8f5ed;border-color:#dedfd4;color:#657363;font:700 10px/1.5 'Nunito',sans-serif;letter-spacing:.06em}
#viewer #viewer-close{display:flex;align-items:center;gap:14px;min-height:44px;padding:0 4px;background:transparent;color:#365142;font:700 12px/1.3 'Nunito',sans-serif;translate:none;transform:none;box-shadow:none!important;white-space:nowrap}
#viewer #viewer-close span{display:grid;place-items:center;width:32px;height:32px;background:#e9edde;border:1px solid #d6dfcd;border-radius:50%;font:400 24px/1 'Nunito',sans-serif;color:#48644e;transition:background .25s,rotate .35s var(--motion-out)}
#viewer .viewer-stage{display:flex;height:auto;min-height:0;padding:20px 30px 12px;background:#edeee6;overflow:hidden}
#viewer .viewer-stage figure{position:relative;display:block;margin:0;width:100%;height:100%;min-height:0;overflow:hidden;border-radius:12px;background:transparent;outline-offset:-3px}
#viewer .viewer-stage img,#viewer[data-shot=mobile] .viewer-stage img{display:block;width:100%;height:100%;max-width:100%;object-fit:contain;object-position:center;border-radius:0;box-shadow:none;transition:none}
#viewer #viewer-previous{position:absolute;inset:0;opacity:0;pointer-events:none}
#viewer #viewer-image{position:relative}
#viewer #viewer-status{z-index:3;bottom:12px;max-width:calc(100% - 30px);text-align:center;white-space:normal;border-radius:12px;background:#264b40e6;color:#fff9ef;font:600 12px/1.4 'Nunito',sans-serif}
#viewer .viewer-controls{display:grid;grid-template-columns:48px minmax(0,480px) 48px;justify-content:center;align-items:center;gap:18px;padding:14px 30px;background:#f8f5ed;border-bottom:1px solid #dedfd4}
#viewer .viewer-controls>button{display:flex;align-items:center;justify-content:center;grid-column:auto;grid-row:auto;justify-self:auto;min-width:44px;width:48px;height:48px;min-height:48px;padding:0;border:1px solid #d6ddce;background:#fffdf5;border-radius:50%;color:#365845;translate:none;transform:none;box-shadow:inset 0 1px 0 #fff!important;transition:background .25s,border-color .25s}
#viewer .viewer-controls>button svg{width:23px;height:23px;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--motion-out)}
#viewer #viewer-shots{position:relative;isolation:isolate;display:flex;min-width:0;align-items:stretch;gap:3px;padding:4px;margin:0;border:1px solid #d9dfd0;border-radius:17px;background:#e9edde}
#viewer #viewer-shots button{position:relative;z-index:1;display:flex;justify-content:center;align-items:center;flex:1;min-width:0;min-height:40px;padding:0 15px;border:0;border-radius:12px;white-space:nowrap;background:transparent;color:#61725a;font:700 12px/1.2 'Nunito',sans-serif;translate:none;transform:none;box-shadow:none!important;transition:color .25s}
#viewer #viewer-shots button[aria-selected=true]{background:transparent;color:#264b3c}
#viewer .shot-selection{position:absolute;z-index:0;left:0;top:4px;height:40px;border:1px solid #d3dcc7;border-radius:12px;background:#fffdf6;box-shadow:0 2px 5px #263e2610;pointer-events:none;transition:transform .35s var(--motion-out),width .35s var(--motion-out)}
#viewer #viewer-portrait-label{font:700 13px/1.4 'Nunito',sans-serif;text-align:center;color:#536a51}
#viewer .viewer-bottom{min-height:0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px 28px;padding:20px 30px 16px;background:#f8f5ed;border:0;align-items:start}
#viewer .viewer-bottom>div:first-child{min-width:0;max-width:780px;width:auto}
#viewer #viewer-counter{display:block;font:800 9px/1.3 'Nunito',sans-serif;color:#879178;letter-spacing:.09em;margin-bottom:5px}
#viewer #viewer-title{font:750 30px/1.16 'Nunito',sans-serif;letter-spacing:-.035em;max-width:none;margin:0;color:#2c5040}
#viewer #viewer-copy{font:500 12px/1.55 'Nunito',sans-serif;color:#677160;margin:7px 0 0;max-width:680px}
#viewer #viewer-credits{display:flex;gap:25px;margin:12px 0 0;color:#496347}
#viewer #viewer-credits dt{font:800 8px/1.4 'Nunito',sans-serif;letter-spacing:.08em;color:#839074}
#viewer #viewer-credits dd{font:600 11px/1.5 'Nunito',sans-serif;margin:3px 0 0}
#viewer #viewer-link{position:static;align-self:center;grid-column:2;grid-row:1;margin:0;padding:7px 8px 7px 15px;min-height:46px;gap:17px;background:#2c5543;border:1px solid #2c5543;border-radius:15px;color:#fff9ed;font:700 12px/1.2 'Nunito',sans-serif;transform:none;translate:none;box-shadow:inset 0 1px 0 #ffffff1c!important;transition:background .25s}
#viewer #viewer-link>span{border-radius:10px;width:30px;height:30px;min-width:30px;font-size:18px}
#viewer #viewer-thumbnails{display:flex;grid-column:1/-1;grid-row:2;gap:7px;width:auto;max-width:100%;margin:0;padding:5px 2px;scrollbar-width:thin;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain}
#viewer #viewer-thumbnails button,#viewer[data-kind=portrait] #viewer-thumbnails button{position:relative;flex:none;width:62px;height:44px;padding:3px;border:1px solid #d8dece;border-radius:9px;opacity:.6;background:#efefe5;translate:none;transform:none;box-shadow:none!important;transition:opacity .25s,border-color .25s}
#viewer #viewer-thumbnails button[aria-pressed=true]{opacity:1;border-color:#6d8a61;background:#e0e8d4}
#viewer #viewer-thumbnails img{border-radius:5px;object-fit:cover}
#viewer button:focus-visible,#viewer a:focus-visible{outline:2px solid #b47755;outline-offset:3px}
@media(hover:hover) and (pointer:fine){
 #viewer #viewer-close:hover span{rotate:90deg;background:#dce6ce}
 #viewer .viewer-controls>button:hover{background:#e5edda;border-color:#bccfab;translate:none;transform:none}
 #viewer #viewer-prev:hover svg{transform:translateX(-3px)}#viewer #viewer-next:hover svg{transform:translateX(3px)}
 #viewer #viewer-shots button:hover{color:#284d3b;translate:none;transform:none}
 #viewer #viewer-link:hover{background:#39634f;translate:none;transform:none}
 #viewer #viewer-thumbnails button:hover{opacity:1;translate:none;transform:none}
}
#viewer .viewer-controls>button:active{background:#dce7d1;box-shadow:inset 0 2px 4px #24472e17!important;translate:none;transform:none}
@media(max-width:760px){
 #viewer[open],#viewer[data-kind=portrait][open]{grid-template-rows:58px minmax(0,1fr) auto auto}
 #viewer .viewer-top{padding:0 16px;gap:12px;font-size:8px;letter-spacing:.025em}#viewer #viewer-kind{max-width:55%}#viewer #viewer-close{font-size:11px;gap:8px}
 #viewer .viewer-stage{padding:14px 14px 5px}
 #viewer .viewer-controls{grid-template-columns:44px minmax(0,1fr) 44px;gap:8px;padding:12px 14px}
 #viewer .viewer-controls>button{width:44px;min-width:44px;height:44px;min-height:44px}
 #viewer #viewer-shots{padding:3px;border-radius:15px;gap:0}
 #viewer #viewer-shots button{min-height:38px;padding:0 6px;font-size:11px;border-radius:11px}
 #viewer .shot-selection{top:3px;height:38px;border-radius:11px}
 #viewer .viewer-bottom{padding:16px 16px max(12px,env(safe-area-inset-bottom));gap:12px 12px}
 #viewer #viewer-title{font-size:24px;max-width:none}
 #viewer #viewer-copy{display:none}
 #viewer #viewer-credits{display:block;margin:7px 0 0}#viewer #viewer-credits>div:first-child{display:none}#viewer #viewer-credits dt{display:none}#viewer #viewer-credits dd{font-size:11px;margin:0}
 #viewer #viewer-link{gap:8px;padding:6px 6px 6px 11px;min-height:44px;font-size:11px;border-radius:13px}
 #viewer #viewer-link>span{width:27px;height:27px;min-width:27px;border-radius:9px;font-size:17px}
 #viewer #viewer-thumbnails button,#viewer[data-kind=portrait] #viewer-thumbnails button{width:56px;height:44px}
}
@media(max-width:350px){#viewer .viewer-top{padding:0 12px}#viewer .viewer-controls{gap:5px;padding-inline:12px}#viewer #viewer-shots button{font-size:10px;padding:0 3px}#viewer #viewer-title{font-size:22px}#viewer .viewer-bottom{padding-inline:12px;gap:10px}}
@media(max-height:540px){
 #viewer[open],#viewer[data-kind=portrait][open]{grid-template-rows:48px minmax(0,1fr) 60px 76px}
 #viewer .viewer-top{padding:0 20px}#viewer .viewer-stage{padding:8px 20px 0}#viewer .viewer-controls{padding:6px 20px}
 #viewer .viewer-bottom{display:flex;align-items:center;padding:8px 20px;gap:20px;overflow:hidden}
 #viewer #viewer-title{font-size:21px;max-width:260px}#viewer #viewer-counter{margin-bottom:3px}
 #viewer #viewer-credits,#viewer #viewer-copy{display:none}#viewer #viewer-thumbnails{flex:1;margin-left:auto;min-width:0}
 #viewer #viewer-link{flex:none;margin-left:auto}
}
@media(prefers-reduced-motion:reduce){#viewer .shot-selection,#viewer .viewer-controls button,#viewer .viewer-controls svg,#viewer #viewer-close span,#viewer #viewer-thumbnails button{transition:none!important}#viewer .viewer-controls button:hover svg,#viewer #viewer-close:hover span{transform:none;rotate:none}}
