:root{--brand:#2a77f4;--page:var(--brand);--ink:oklch(20% .02 260);--glow:#182eaa;--gradient-app:radial-gradient(46vmax 30vh at 100% 45%, color-mix(in srgb, var(--glow) 75%, transparent), transparent 70%);--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--plate:#ffffff1a;--row:#ffffff26;--row-hover:#fff3}@media (prefers-color-scheme:dark){:root{--page:#1453b8;--glow:#2a77f4;--plate:#ffffff0d;--row:#ffffff12;--row-hover:#ffffff1a}}*,:before,:after{box-sizing:border-box}html{background:var(--page);overscroll-behavior-y:none;-webkit-text-size-adjust:100%}body{color:var(--ink);-webkit-tap-highlight-color:transparent;overscroll-behavior-y:none;margin:0;font-family:DM Sans,ui-sans-serif,system-ui,sans-serif;line-height:1.5}body:before{content:"";z-index:-1;pointer-events:none;background:var(--gradient-app);height:100vh;position:fixed;inset:0 0 auto}h1,h2,p{margin:0}button{color:inherit;font:inherit;cursor:pointer;background:0 0;border:0;margin:0;padding:0}.screen{flex-direction:column;min-height:100dvh;display:flex}.head{z-index:20;padding-top:calc(var(--safe-top) + 10px);position:sticky;top:0}.head:before{content:"";pointer-events:none;background:var(--page);position:absolute;inset:0;-webkit-mask-image:linear-gradient(#000 calc(100% - .75rem),#0000);mask-image:linear-gradient(#000 calc(100% - .75rem),#0000)}.head__row{align-items:center;gap:8px;width:100%;max-width:911px;margin:0 auto;padding:0 80px 16px 16px;display:flex;position:relative}.head__menu{color:#fffc;flex-shrink:0;margin-left:-4px;padding:4px;line-height:0;transition:color .15s,transform .15s}.head__menu:hover{color:#fff}.head__menu:active{transform:scale(.9)}.head__menu svg{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;width:24px;height:24px;display:block}.bow{z-index:30;pointer-events:none;width:clamp(88px,26vw,112px);height:auto;position:fixed;top:0;right:0}.head__row,.page,.bow{transition:opacity .2s ease-out}.leaving :is(.head__row,.page,.bow){opacity:0}.page{width:100%;max-width:911px;padding:12px 16px calc(var(--safe-bottom) + 1.5rem);flex-direction:column;flex:1;margin:0 auto;display:flex}.cols{flex-direction:column;gap:16px;display:flex}.left{flex-direction:column;gap:24px;min-width:0;display:flex}.title{color:#fff;font-size:30px;font-weight:700;line-height:1.25}.nowrap{white-space:nowrap}@media (width<=359px){.nowrap{white-space:normal}}.tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;display:grid}.tile{background:var(--row);color:#fff;text-align:left;border-radius:16px;flex-direction:column;min-width:0;transition:background-color .15s,transform .15s;display:flex;overflow:hidden}.tile:hover{background:var(--row-hover)}.tile:active{transform:scale(.98)}.tile>img{aspect-ratio:5/8;object-fit:cover;width:100%;height:auto;display:block}.tile .row__pic{margin:4px 8px 0;display:none}.tile__name{padding:8px;font-size:14px;font-weight:600;line-height:1.2}.sec{isolation:isolate;background:var(--plate);border:3px solid #fffc;border-radius:22px;flex-direction:column;gap:12px;padding:16px;display:flex;position:relative;overflow:hidden}.sec__bg{z-index:-1;object-fit:contain;width:112px;height:112px;position:absolute;top:-12px;right:-16px;transform:rotate(12deg)}.sec__bg--bottom{top:auto;bottom:-12px}.sec__head{flex-direction:column;gap:2px;padding-right:64px;display:flex}.sec__title{color:#fff;font-size:19px;font-weight:700;line-height:1.25}.sec__lede{color:#ffffffbf;font-size:14px;line-height:1.375}.sec__chips{flex-wrap:wrap;gap:8px;display:flex}.chip{background:color-mix(in srgb, var(--page) 76%, white);color:#fff;white-space:nowrap;border-radius:9999px;align-items:center;gap:6px;height:40px;padding:0 16px;font-size:15px;font-weight:600;line-height:1.25;text-decoration:none;transition:background-color .15s,transform .15s;display:flex;position:relative}.chip:hover{background:color-mix(in srgb, var(--page) 68%, white)}.chip:active{transform:scale(.97)}.chip img{object-fit:contain;width:18px;height:18px}.chip svg{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;width:16px;height:16px}.chip--own{background:0 0;border:2px dashed #fff9}.chip--own:hover{background:#ffffff1a}.chip__date{color:#2a77f4;background:#fff;border-radius:9999px;padding:2px 6px;font-size:11px;font-weight:700;line-height:1;position:absolute;top:-8px;right:-4px}.kinds{flex-direction:column;gap:12px;padding-top:8px;display:flex}.kinds__title{color:#fff;font-size:20px;font-weight:700;line-height:1.25}.kinds__lede{color:#ffffffbf;margin-top:4px;font-size:15px;line-height:1.375}.rows{flex-direction:column;gap:8px;display:flex}.row{background:var(--row);color:#fff;border-radius:20px;align-items:center;gap:12px;padding:12px;text-decoration:none;transition:background-color .15s,transform .15s;display:flex}.row:hover{background:var(--row-hover)}.row:active{background:#ffffff40;transform:scale(.99)}.row__pic{flex-shrink:0;justify-content:center;align-self:flex-start;align-items:center;width:60px;height:68px;display:flex;position:relative}.row__pic>img{object-fit:contain;filter:drop-shadow(0 4px 3px #00000012)drop-shadow(0 2px 2px #0000000f)}.row__pic--photos>img{max-width:100%;max-height:100%}.row__pic--object>img{max-width:44px;max-height:44px}.row__people{width:60px;height:56px;position:relative}.row__people>span{background:#0000001a;border-radius:50%;width:44px;height:44px;position:absolute;top:0;left:0;overflow:hidden;box-shadow:0 0 0 2px #fffc}.row__people>span+span{top:12px;left:16px}.row__people img{object-fit:cover;object-position:50% 30%;width:100%;height:100%;display:block}.row__text{flex-direction:column;flex:1;align-items:flex-start;min-width:0;display:flex}.row__name{margin-bottom:2px;font-size:17px;font-weight:600;line-height:1.25}.row__line{color:#ffffffbf;font-size:14px;line-height:1.375}.row__go{color:#fff9;fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;width:20px;height:20px}.examples{flex-direction:column;align-items:center;gap:12px;padding-top:32px;display:flex;position:relative}.caption{color:#ffffffb3;font-size:15px;font-weight:600}.frame{aspect-ratio:9/16;width:calc(100% - 2rem);max-width:280px;position:relative}.frame video{object-fit:cover;background:#000;border-radius:20px;width:100%;height:100%;display:block;position:absolute;inset:0;box-shadow:0 1px 3px #0000001a,0 1px 2px -1px #0000001a}.card__controls{display:flex;position:absolute;bottom:4px;left:4px}.ctl{justify-content:center;align-items:center;width:48px;height:48px;display:flex}.ctl span{color:#fff;backdrop-filter:blur(8px);background:#0000008c;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;transition:transform .15s;display:flex;box-shadow:0 1px 3px #0000001a}.ctl:active span{transform:scale(.9)}.ctl svg{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;width:20px;height:20px}.ctl svg[hidden]{display:none}.ctl .ctl__fill{fill:currentColor}.ctl .ctl__play{margin-left:2px}.arrow{z-index:2;width:36px;height:36px;color:var(--brand);background:#fff;border-radius:50%;justify-content:center;align-items:center;margin-top:-18px;transition:transform .15s;display:flex;position:absolute;top:50%;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a}.arrow:before{content:"";position:absolute;inset:-6px}.arrow:active{transform:scale(.95)}.arrow[hidden]{display:none}.arrow--prev{left:-18px}.arrow--next{right:-18px}.arrow svg{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;width:20px;height:20px}.dots{align-items:center;gap:8px;display:flex}.dot{background:#fff6;border-radius:9999px;width:8px;height:8px;transition:width .15s,background-color .15s}.dot:hover{background:#fff}.dot[aria-current=true]{background:#fff;width:24px}.menu{width:min(92vw,400px);color:var(--ink);background:#fff;border:0;border-radius:24px;padding:0;box-shadow:0 20px 50px #00000040}.menu::backdrop{background:#0006}.menu__head{justify-content:space-between;align-items:center;padding:20px 20px 8px 24px;font-size:20px;font-weight:700;display:flex}.menu__close{background:#0000000d;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;font-size:16px;display:flex}.menu__list{flex-direction:column;padding:4px 12px 16px;display:flex}.menu__list a{color:inherit;border-radius:14px;padding:14px 12px;font-size:17px;font-weight:500;text-decoration:none}.menu__list a:hover{background:#0000000d}.player .menu__head{gap:12px;line-height:1.25}.player video{aspect-ratio:9/16;background:#000;border-radius:20px;width:min(32.625dvh,20.25rem);max-width:calc(100% - 40px);margin:8px auto 12px;display:block}.player__hint{text-align:center;color:#0009;margin:0 20px 12px;font-size:15px;line-height:1.35}.player__make{background:var(--brand);color:#fff;border-radius:16px;justify-content:center;align-items:center;height:48px;margin:0 20px 20px;font-size:17px;font-weight:600;text-decoration:none;transition:background-color .15s,transform .15s;display:flex}.player__make:hover{background:#0d65f2}.player__make:active{transform:scale(.98)}.player__make[hidden]{display:none}.all{color:#fff;flex-direction:column;gap:16px;margin-top:48px;display:flex}.all__title{font-size:20px;font-weight:700;line-height:1.25}.all__group h3{margin:0 0 6px;font-size:16px;font-weight:700;line-height:1.3}.all__group ul{flex-wrap:wrap;gap:4px 16px;margin:0;padding:0;list-style:none;display:flex}.all a{color:#ffffffd9;font-size:15px;line-height:1.6;text-decoration:none;transition:color .15s}.all h3 a{color:#fff;font-size:inherit}.all a:hover{color:#fff;text-underline-offset:3px;text-decoration:underline}.foot{color:#ffffff80;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 8px;margin-top:40px;font-size:15px;display:flex}.foot a{color:inherit;padding:4px 0;text-decoration:none;transition:color .15s}.foot a:hover{color:#fffc}.foot span{color:#ffffff4d}@media (width>=640px){.head{padding-top:calc(var(--safe-top) + 1rem)}.head__row{gap:12px;padding:0 96px 12px 48px}.head__menu svg{width:28px;height:28px}.page{padding:24px 48px calc(var(--safe-bottom) + 1.5rem)}.title{font-size:32px}.foot{margin-top:56px}}@media (width>=768px){.head__row{padding-right:48px}.tile{text-align:center;align-items:center;padding-top:4px}.tile>img{display:none}.tile .row__pic{align-self:center;display:flex}.bow{width:clamp(120px,50vw - 360px,152px)}.cols{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:40px;margin-block:auto;display:grid}.examples-wrap{padding-top:48px;position:sticky;top:96px}.examples{padding-top:0}.caption{inset-inline:0;text-align:center;margin-bottom:12px;position:absolute;bottom:100%}}
