:root{font-family:Arial,Helvetica,sans-serif;color:#202126;background:#f4f5f8;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button{font:inherit;cursor:pointer}button:focus-visible{outline:3px solid #6677ef;outline-offset:4px}header{min-height:80px;padding:22px 5vw;background:#fff;border-bottom:1px solid #dfe2eb;display:flex;align-items:center;justify-content:space-between;gap:16px}.brand{font-size:26px;letter-spacing:-1px;font-weight:700;color:#2e3983}.slash{font-weight:400;color:#949bb9;margin:0 14px}.sub{font-size:14px;color:#616775}.tag{font-size:12px;letter-spacing:2px;color:#535c85}main{max-width:1120px;margin:auto;padding:30px 32px 20px}.heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:24px}.eyebrow{color:#626b96;letter-spacing:1.8px;font-size:12px;margin:0 0 9px}h1{font-size:22px;font-weight:500;line-height:1.3;margin:0}.expand{border:1px solid #cbd0e1;border-radius:8px;padding:12px 16px;background:white;color:#303d86;white-space:nowrap;font-size:14px}.viewer{display:flex;justify-content:center;align-items:center;gap:36px}.art{display:block;border:0;background:none;padding:0;line-height:0;cursor:default}.art img{display:block;width:auto;height:auto;max-height: min(64vh,720px);max-width:100%;box-shadow:0 8px 32px #1e25451a}.arrow{border:1px solid #d0d5e3;background:#fff;width:48px;height:48px;flex-shrink:0;border-radius:50%;font-size:24px;color:#303d86}.arrow:hover:not(:disabled),.expand:hover{background:#e8ebf7}.arrow:disabled{opacity:.3;cursor:default}.navigation{display:flex;align-items:center;justify-content:center;gap:24px;margin:21px 0}#counter{font-size:14px;white-space:nowrap;font-variant-numeric:tabular-nums;color:#303d86}#dots{display:flex;gap:3px}#dots button{width:18px;height:26px;padding:0;border:0;background:none;position:relative}#dots button:after{content:'';width:6px;height:6px;border-radius:50%;background:#c3c8d8;position:absolute;top:10px;left:6px}#dots button[aria-current=true]:after{background:#303d86;width:8px;height:8px;left:5px;top:9px}.hint{font-size:12px;color:#6b7181}#thumbs{display:flex;gap:10px;overflow-x:auto;padding:6px 4px 12px;justify-content:safe center}#thumbs button{flex:0 0 62px;padding:3px;border:2px solid transparent;border-radius:5px;background:none;opacity:.62}#thumbs button[aria-current=true]{border-color:#303d86;opacity:1}#thumbs img{width:100%;aspect-ratio:4/5;object-fit:contain;display:block}footer{text-align:center;font-size:13px;line-height:1.5;color:#717787;margin-top:16px}dialog{padding:0;border:0;width:96vw;max-width:1200px;height:94dvh;max-height:94dvh;background:#171920;color:white;border-radius:10px}dialog::backdrop{background:#0b0e16df}.zoom-toolbar{display:flex;justify-content:space-between;align-items:center;padding:12px 20px;background:#171920;position:sticky;top:0}.zoom-toolbar button{border:1px solid #565c70;background:none;color:white;border-radius:6px;padding:10px 18px}.zoom-body{padding:0 16px 20px;overflow:auto;height:calc(100% - 66px)}.zoom-body img{display:block;width:1080px;max-width:none;height:auto;margin:auto}@media(max-width:680px){header{padding:17px 20px;min-height:68px}.brand{font-size:23px}.sub{font-size:12px;display:block;margin-top:3px}.slash,.tag{display:none}main{padding:22px 16px}.heading{align-items:flex-start;gap:12px;margin-bottom:20px}h1{font-size:18px}.eyebrow{font-size:11px}.expand{font-size:12px;padding:10px}.viewer{position:relative;gap:0;padding-bottom:0}.art img{max-height:none;width:100%;height:auto}.arrow{position:absolute;bottom:12px;width:40px;height:40px;box-shadow:0 2px 8px #0002;background:#fffffff0}.prev{left:12px}.next{right:12px}.navigation{gap:12px;flex-wrap:wrap;margin:15px 0 10px}.hint{width:100%;text-align:center}#thumbs{justify-content:flex-start}#thumbs button{flex-basis:51px}footer{font-size:12px}dialog{width:100vw;height:100dvh;max-height:100dvh;max-width:100vw;border-radius:0}}

.heading{justify-content:flex-end}

@media(max-width:680px){
 .viewer .arrow{top:50%;bottom:auto;transform:translateY(-50%);width:30px;height:30px;border:0;background:rgba(255,255,255,.72);box-shadow:0 1px 4px #0002;display:grid;place-items:center;font-size:0;padding:0;color:#374455}
 .viewer .arrow::before{content:'';width:8px;height:8px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);margin-right:3px}
 .viewer .prev::before{transform:rotate(-135deg);margin-right:0;margin-left:3px}
 .viewer .prev{left:10px}.viewer .next{right:10px}
 .viewer .arrow::after{content:'';position:absolute;inset:-7px}
}
