body:has(.catalog-viewer) .nav{height:64px}.catalog-viewer{color:#efeff2;letter-spacing:-.015em;width:calc(100% - 48px);max-width:1536px;margin:0 auto;padding:52px 0 72px;font-family:Catalog Inter,Inter,sans-serif}.viewer-breadcrumb{align-items:center;gap:12px;margin-bottom:16px;font-size:14px;line-height:22px;display:flex}.viewer-breadcrumb a{display:flex}.viewer-breadcrumb>span:first-of-type{color:#71717b}.viewer-layout{grid-template-columns:minmax(0,1fr) 366px;align-items:start;gap:40px;display:grid}.viewer-main{min-width:0}.viewer-main header h1{letter-spacing:-.02em;font-family:Catalog Inter,Inter,sans-serif;font-size:32px;font-weight:600;line-height:1.15}.viewer-main header p{color:#a5a5ae;margin:8px 0 20px;font-size:15px;line-height:1.55}.viewer-stage{background:#111318;border-radius:18px;width:100%;height:min(54vw,610px);position:relative;overflow:hidden}.viewer-stage img,.viewer-stage video{object-fit:contain;width:100%;height:100%;position:absolute;inset:0}.viewer-stage video{opacity:0}.viewer-stage[data-playing] video{opacity:1}.viewer-stage [data-viewer-error]{color:#c1c1c9;background:#08090be8;border-radius:6px;padding:12px;font-size:12px;position:absolute;inset:auto 20px 20px}.viewer-controls{color:#9797a2;font-variant-numeric:tabular-nums;align-items:center;gap:10px;min-height:44px;font-size:12px;display:flex}.viewer-controls[hidden]{display:none}.viewer-controls button{width:32px;height:32px;color:inherit;background:0 0;border:0;place-items:center;padding:0;display:grid}.viewer-controls button:hover{color:#fff}.viewer-controls input{appearance:none;accent-color:#d4d4dc;cursor:pointer;background:#ffffff30;border-radius:8px;flex:1;min-width:0;height:4px}.viewer-controls input::-webkit-slider-thumb{appearance:none;background:#d5d5dd;border-radius:50%;width:10px;height:10px}.viewer-pause-icon,.viewer-sound-icon,[data-playing] .viewer-play-icon,[data-unmuted] .viewer-muted-icon{display:none}[data-playing] .viewer-pause-icon,[data-unmuted] .viewer-sound-icon{display:inline-flex}.viewer-selection{text-align:center;margin:6px 0 16px;font-size:22px;font-weight:600;line-height:1.2}.viewer-template-shell{align-items:center;gap:12px;display:flex}.viewer-templates{scrollbar-width:none;flex:1;gap:10px;min-width:0;padding:5px;scroll-padding:6px;display:flex;position:relative;overflow-x:auto;mask-image:linear-gradient(90deg,#0000,#000 20px calc(100% - 20px),#0000)}.viewer-templates a{border:2px solid #0000;border-radius:12px;flex:0 0 24%;min-width:130px;padding:2px;display:block;position:relative;overflow:hidden}.viewer-templates a[aria-current]{border-color:#dfdfe7}.viewer-templates img{aspect-ratio:16/9;object-fit:cover;border-radius:8px;width:100%;display:block}.viewer-templates span{clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}.viewer-template-arrow{color:#b1b1bc;background:#111217;border:1px solid #ffffff20;border-radius:50%;flex:0 0 36px;place-items:center;width:36px;height:36px;padding:0;display:grid}.viewer-credit{color:#7f7f8b;margin-top:20px;font-size:11px;line-height:1.7}.viewer-credit a{text-decoration:underline}.viewer-panel{border:1px solid #ffffff14;border-radius:18px;flex-direction:column;gap:22px;min-height:650px;padding:20px;display:flex}.viewer-panel h2{font-size:16px;font-weight:600;line-height:24px}.viewer-panel>p{color:#9999a5;font-size:13px;line-height:1.7}.viewer-starting-point h3{margin-bottom:12px;font-size:13px;font-weight:500}.viewer-starting-point ul{gap:12px;margin:0;padding:0;list-style:none;display:grid}.viewer-starting-point li{color:#a5a5b1;border:1px solid #ffffff14;border-radius:6px;padding:12px;font-size:12px;line-height:1.6}.viewer-panel-footer{gap:15px;margin-top:auto;display:grid}.viewer-panel-footer>span{color:#777783;font-size:11px}.viewer-panel-footer .button{justify-content:center;width:100%}.viewer-reading{color:#a0a0ac;border-top:1px solid #ffffff12;flex-wrap:wrap;gap:24px;margin-top:36px;padding-top:24px;font-size:12px;display:flex}@media (width<=1023px){.viewer-layout{grid-template-columns:minmax(0,1fr);gap:24px}.viewer-stage{height:48vw}.viewer-panel{min-height:0;margin-top:32px}}@media (width<=767px){.catalog-viewer{padding-top:32px}.viewer-layout{grid-template-columns:1fr}.viewer-stage{border-radius:12px;height:min(110vw,520px)}.viewer-main header h1{font-size:32px}.viewer-main header p{font-size:14px}.viewer-panel{gap:18px;min-height:0;padding:18px}.viewer-selection{font-size:22px}.viewer-templates a{min-width:120px}.viewer-template-shell{gap:5px}.viewer-reading{gap:18px}}.viewer-main{--stage-height:min(54vw, 610px)}.viewer-stage{width:min(100%, calc(var(--stage-height) * var(--viewer-ratio)));height:var(--stage-height);background:0 0;margin-inline:auto}.viewer-controls{width:min(100%, calc(var(--stage-height) * var(--viewer-ratio)));margin-inline:auto}.viewer-templates a{width:auto;min-width:0;height:136px;aspect-ratio:var(--template-ratio);flex:none}.viewer-templates img{aspect-ratio:auto;height:100%}@media (width<=767px){.viewer-main{--stage-height:356px}.viewer-templates a{min-width:0;height:110px}}.viewer-templates a{opacity:.6;border:0;height:132px;padding:0}.viewer-templates a[aria-current]{opacity:1;outline-offset:2px;outline:2px solid #dfdfe7}.viewer-templates a:hover{opacity:.9}.viewer-templates img{border-radius:10px}@media (width<=767px){.catalog-viewer{width:calc(100% - 32px)}.viewer-main header p{font-size:15px}.viewer-template-arrow{display:none}.viewer-templates a{height:132px}.viewer-main:has(.viewer-controls[hidden]){--stage-height:400px}}
