:root{color-scheme:light;--page: #f7f4ed;--ink: #302e28;--muted: #65635e;--line: #302e2829;--demo-header: 140px;font-family:system-ui,sans-serif;color:var(--ink);background:var(--page)}:root[data-theme=dark]{color-scheme:dark;--page: #141820;--ink: #eee8dc;--muted: #bab8b2;--line: #eee8dc30}*{box-sizing:border-box}body{margin:0}a{color:inherit;text-underline-offset:4px}.demo-bar{position:sticky;top:0;z-index:10;background:var(--page);border-bottom:1px solid var(--line);padding:18px clamp(16px,4vw,56px) 12px;display:grid;grid-template-columns:1fr auto;gap:12px 24px}.identity a{font-size:12px;text-decoration:none;color:var(--muted)}h1{font:24px/1.2 Georgia,serif;margin:8px 0 0;letter-spacing:-.035em}.options{display:flex;align-items:end;gap:12px}label{display:grid;gap:5px;font-size:11px;color:var(--muted)}select,button{font:13px system-ui,sans-serif;min-height:44px;border:1px solid var(--line);border-radius:8px;padding:10px 12px;background:var(--page);color:var(--ink)}button{cursor:pointer;background:var(--ink);color:var(--page)}button:disabled{opacity:.5;cursor:default}:focus-visible{outline:2px solid var(--ink);outline-offset:4px}#hint{grid-column:1 / -1;margin:0;font-size:12px;color:var(--muted);line-height:1.5}#gallery.tpg{--tpg-bg: var(--page);--tpg-ink: var(--ink);--tpg-accent: var(--ink);--tpg-height: calc(100svh - var(--demo-header))}#gallery .tpg-toolbar{display:none}#gallery .tpg-stage{border-radius:0;background:var(--page)}#gallery .tpg-note{display:none}footer{padding:20px clamp(16px,4vw,56px);display:flex;justify-content:space-between;gap:16px;font-size:11px;color:var(--muted);border-top:1px solid var(--line)}.fallback{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;padding:40px}.fallback img{max-width:180px}@media(max-width:760px){.demo-bar{grid-template-columns:1fr;padding-top:12px;gap:10px}.identity{display:flex;justify-content:space-between;align-items:center;gap:12px}h1{font-size:19px;margin:0}.options{display:grid;grid-template-columns:1fr 1fr auto;gap:8px}select{width:100%;min-width:0;padding-inline:7px}button{padding-inline:9px}footer{flex-wrap:wrap}}@media(max-width:370px){.options{grid-template-columns:1.3fr 1fr}#browse{grid-column:1 / -1}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important}}.tpg-dialog{--chip-ink: 245 239 230;--chip-base: rgb(15 23 35 / .48);color:rgb(var(--chip-ink))}.tpg-dialog .tpg-scrim{background:#04070c99}.tpg-dialog .tpg-control,.tpg-dialog .tpg-status{color:rgb(var(--chip-ink));border:0;background:linear-gradient(rgb(var(--chip-ink) / .1) 0 100%),var(--chip-base);box-shadow:inset 0 .5px #ffffff73,inset 0 0 0 .5px #ffffff29,0 2px 10px #00000047;backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%)}.tpg-dialog .tpg-control{display:grid;place-items:center;width:44px;height:44px;min-width:44px;padding:0;line-height:1;border-radius:50%;appearance:none;-webkit-appearance:none;-webkit-tap-highlight-color:transparent;transition:background .16s ease,box-shadow .16s ease,scale .16s ease}.tpg-dialog .tpg-control:focus{outline:none}:root[data-viewer-input=keyboard] .tpg-dialog .tpg-control:focus-visible{outline:2px solid #f5efe6;outline-offset:4px}@media(hover:hover){.tpg-dialog .tpg-control:hover{background:linear-gradient(rgb(var(--chip-ink) / .2) 0 100%),var(--chip-base);box-shadow:inset 0 .5px #fff9,inset 0 0 0 .5px #ffffff3d,0 4px 14px #00000057}}.tpg-dialog .tpg-control:active{scale:.94}.tpg-dialog :is(.tpg-close,.tpg-prev,.tpg-next){font-size:0}.tpg-dialog :is(.tpg-close,.tpg-prev,.tpg-next):before{content:"";position:absolute;inset:0;margin:auto;width:20px;height:20px;pointer-events:none;background:currentColor;mask:var(--control-icon) center / 20px 20px no-repeat;-webkit-mask:var(--control-icon) center / 20px 20px no-repeat}.tpg-close{--control-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 6 12 12M18 6 6 18' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E")}.tpg-prev{--control-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m14 5-7 7 7 7' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}.tpg-next{--control-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m10 5 7 7-7 7' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}.tpg-dialog .tpg-status{left:50%;right:auto;transform:translate(-50%);width:max-content;max-width:calc(100% - 32px);max-height:42px;padding:8px 16px;border-radius:24px}.tpg-dialog .tpg-scrim.has-optical-backdrop{background:#04070c;backdrop-filter:none;-webkit-backdrop-filter:none}.viewer-optical-backdrop{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.58;filter:blur(26px) saturate(128%)}.tpg-dialog .tpg-flight{will-change:transform}body:has(#gallery:not([data-tpg-state=open])) .tpg-dialog :is(.tpg-controls,.tpg-status){opacity:0!important;pointer-events:none!important}body:has(#gallery:not([data-tpg-state=open])) .tpg-dialog .tpg-control{pointer-events:none!important}@media(prefers-reduced-motion:reduce){.tpg-dialog .tpg-control{transition:none}.tpg-dialog .tpg-control:active{scale:1}}@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){.tpg-dialog{--chip-base: #24384f}}@media(prefers-reduced-transparency:reduce){.tpg-dialog{--chip-base: #24384f}.tpg-dialog :is(.tpg-control,.tpg-status,.tpg-scrim){backdrop-filter:none;-webkit-backdrop-filter:none}.tpg-dialog .tpg-scrim{background:#04070c}}@media(forced-colors:active){.tpg-dialog .tpg-control{border:1px solid ButtonText;background:ButtonFace;color:ButtonText;box-shadow:none}.tpg-dialog .tpg-control:before{background:ButtonText;forced-color-adjust:none}:root[data-viewer-input=keyboard] .tpg-dialog .tpg-control:focus-visible{outline-color:Highlight}}