.tp{--tp-gutter:max(var(--cie-edge), env(safe-area-inset-left), env(safe-area-inset-right));--tp-wide:1180px;min-height:100dvh;padding-bottom:calc(64px + env(safe-area-inset-bottom));-webkit-tap-highlight-color:transparent;flex-direction:column;display:flex;overflow-x:clip}.tp a,.tp button,.tp label{touch-action:manipulation}@media (prefers-reduced-motion:no-preference){.tp .m-btn{transition:color var(--m-dur-fast) var(--m-ease), border-color var(--m-dur-fast) var(--m-ease), background-color var(--m-dur-fast) var(--m-ease), transform var(--m-dur-fast) var(--m-ease-out)}}.tp .m-btn:active:not(:disabled,[aria-disabled=true]){transform:scale(.97)}.tp:has(>.m-sitefoot){padding-bottom:0}.tp-header{width:100%;max-width:calc(var(--tp-wide) + 2 * var(--tp-gutter));min-height:calc(56px + env(safe-area-inset-top));padding:env(safe-area-inset-top) var(--tp-gutter) 0;justify-content:space-between;align-items:center;gap:8px;margin:0 auto;display:flex;position:relative}.tp-header:after{content:"";background:var(--m-line);pointer-events:none;width:100vw;height:1px;position:absolute;bottom:0;left:50%;transform:translate(-50%)}@media (min-width:768px){.tp-header{min-height:calc(72px + env(safe-area-inset-top))}.tp-nav{gap:16px}}.tp-wordmark{text-decoration:none}.tp-nav{align-items:center;gap:4px;display:flex}.tp-navlink{min-height:var(--m-tap);color:var(--cie-ink);transition:color var(--m-dur-fast) var(--m-ease);align-items:center;padding:0 12px;font-size:15px;font-weight:500;text-decoration:none;display:inline-flex}.tp-navlink[aria-current=page]{text-underline-offset:6px;text-decoration:underline;text-decoration-thickness:1px}@media (hover:hover) and (pointer:fine){.tp-navlink:hover{color:var(--m-accent-text)}}.tp-login{padding-inline:18px}@media (max-width:359px){.tp-navlink{padding:0 8px}}.tp-main{width:100%;max-width:calc(var(--tp-wide) + 2 * var(--tp-gutter));padding:0 var(--tp-gutter);min-width:0;margin:0 auto}.tp-title{font-family:var(--m-display);letter-spacing:-.02em;color:var(--cie-ink);text-wrap:balance;font-size:clamp(40px,5vw,64px);font-weight:400;line-height:1.05}.tp-lead{max-width:46ch;color:var(--cie-ink);text-wrap:pretty;margin-top:14px;font-size:clamp(17px,.4vw + 15.5px,18px);line-height:1.55}.tp-note{max-width:52ch;color:var(--cie-paper-mute);margin-top:10px;font-size:14px;line-height:1.45}.tp-textlink{min-height:var(--m-tap);color:var(--cie-ink);text-underline-offset:4px;align-items:center;gap:6px;font-size:15px;font-weight:500;text-decoration:underline;text-decoration-thickness:1px;display:inline-flex}@media (hover:hover) and (pointer:fine){.tp-textlink:hover{color:var(--m-accent-text)}}.tp-intro{padding-top:clamp(28px,4vw + 12px,64px)}.tp-jump{flex-wrap:wrap;gap:0 20px;margin-top:16px;display:flex}.tp-jump__link{min-height:var(--m-tap);min-width:var(--m-tap);color:var(--cie-ink);text-underline-offset:4px;align-items:center;font-size:15px;font-weight:500;text-decoration:underline;text-decoration-thickness:1px;display:inline-flex}@media (hover:hover) and (pointer:fine){.tp-jump__link:hover{color:var(--m-accent-text)}}.tp-group{margin-top:clamp(48px,4vw + 32px,88px);scroll-margin-top:16px}.tp-group__head{border-bottom:1px solid var(--m-line);gap:6px;margin-bottom:20px;padding-bottom:16px;display:grid}.tp-group__title{font-family:var(--m-display);letter-spacing:-.01em;font-size:clamp(30px,3.6vw,44px);font-weight:400;line-height:1.1}.tp-group__desc{color:var(--cie-paper-mute);max-width:60ch;font-size:15px;line-height:1.45}.tp-grid{--tp-row-gap:40px;grid-template-columns:minmax(0,1fr);gap:0 clamp(20px,3vw,40px);margin:0 -8px;padding:0;list-style:none;display:grid}@media (min-width:600px){.tp-grid{--tp-row-gap:56px;grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:1024px){.tp-grid{--tp-row-gap:64px;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(24px,3vw,44px)}}.tp-card{grid-row:span 4;grid-template-rows:subgrid;min-width:0;margin-bottom:var(--tp-row-gap);border-radius:0;row-gap:0;padding:8px 8px 12px;display:grid;position:relative}.tp-card__preview{transition:transform var(--m-dur) var(--m-ease-out);align-self:end;display:flex;position:relative}.tp-motion-host{align-self:end;width:100%;display:flex}.tp-motion-host--detail{width:100%}.tp-motion-host{position:relative}.tp-motion-pause{z-index:3;cursor:pointer;border:2px solid;border-radius:999px;place-items:center;width:44px;height:44px;padding:0;display:grid;position:absolute;bottom:10px;right:10px;box-shadow:0 1px 4px #0000001f}.tp-motion-pause:focus-visible{outline:2px solid var(--m-accent-text);outline-offset:2px}@media (prefers-reduced-motion:reduce){.tp-motion-pause{display:none}}.tp-card__fp .fp-layer{content-visibility:auto}.tp-card__preview:before{content:"";border-radius:var(--m-radius-device-s);box-shadow:var(--m-shadow-lift);opacity:0;transition:opacity var(--m-dur) var(--m-ease-out);position:absolute;inset:0}.tp-card__name{letter-spacing:-.01em;margin-top:18px;font-size:18px;font-weight:500;line-height:1.25}.tp-card__link{color:var(--cie-ink);text-decoration:none}.tp-card__link:after{content:"";z-index:1;border-radius:inherit;position:absolute;inset:0}html .tp-card__link:focus-visible{outline:none}.tp-card__link:focus-visible:after{outline:2px solid var(--m-accent);outline-offset:-2px}.tp-card:active:not(:has(.tp-swatches--pick:active)) .tp-card__preview{transform:scale(.98)}@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){.tp-card:hover:active:not(:has(.tp-swatches--pick:active)) .tp-card__preview{transform:translateY(-4px)scale(.98)}}@media (hover:hover) and (pointer:fine){.tp-card:hover .tp-card__link{text-underline-offset:4px;text-decoration:underline;text-decoration-thickness:2px}.tp-card:hover .tp-card__preview{transform:translateY(-4px)}.tp-card:hover .tp-card__preview:before{opacity:1}}.tp-card__desc{color:var(--cie-paper-mute);text-wrap:pretty;margin-top:4px;font-size:14px;line-height:1.4}.tp-card__meta{color:var(--cie-paper-mute);flex-wrap:wrap;align-items:center;gap:0 8px;margin-top:4px;font-size:14px;line-height:1.35;display:flex}.tp-card__count{min-width:0}.tp-card__sets{flex:1 0 100%;min-width:0}.tp-card__set{white-space:nowrap;text-overflow:ellipsis;color:var(--cie-ink);display:block;overflow:hidden}.tp-swatches{flex-wrap:wrap;gap:3px;display:inline-flex}.tp-swatch{width:14px;height:14px;box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--cie-ink) 22%, transparent);border-radius:50%;flex:none;display:inline-block}.tp-swatch--lg{width:28px;height:28px}.tp-swatches--pick{z-index:2;gap:0;margin-inline:-13px 0;position:relative}.tp-swatch-pick{-webkit-user-select:none;user-select:none;cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:0;border-radius:50%;place-items:center;width:44px;height:44px;margin:0;padding:0;display:inline-grid}.tp-swatch-pick .tp-swatch{width:18px;height:18px;box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--cie-ink) 22%, transparent), 0 0 0 0 var(--cie-paper), 0 0 0 0 var(--cie-ink)}.tp-swatch-pick[aria-checked=true] .tp-swatch{box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--cie-ink) 22%, transparent), 0 0 0 2px var(--cie-paper), 0 0 0 4px var(--cie-ink)}.tp-swatch-pick:active .tp-swatch{transform:scale(.86)}@media (prefers-reduced-motion:no-preference){.tp-swatch-pick .tp-swatch{transition:transform var(--m-dur-fast) var(--m-ease-out), box-shadow var(--m-dur-fast) var(--m-ease-out)}}html .tp-swatch-pick:focus-visible{outline:3px solid var(--cie-ink);outline-offset:-6px}:root:active-view-transition-type(swatch){view-transition-name:none}:root:active-view-transition-type(swatch)::view-transition-group(*){animation-duration:.2s;animation-timing-function:linear}:root:active-view-transition-type(swatch)::view-transition-old(*){animation-duration:.2s;animation-timing-function:linear}:root:active-view-transition-type(swatch)::view-transition-new(*){animation-duration:.2s;animation-timing-function:linear}.tp-back{margin-top:8px}.tp-detail{--tp-k:.56;grid-template-columns:minmax(0,1fr);grid-template-areas:"head""phone""scenes""show""note""pickers""footer";gap:24px;margin-top:8px;display:grid}@media (max-width:899px) and (max-height:740px){.tp-detail{--tp-k:.48}}.tp-detail__head{overflow-wrap:anywhere;grid-area:head;min-width:0}.tp-detail__head .tp-lead{max-width:min(46ch,100%)}.tp-titlebar{justify-content:space-between;align-items:center;gap:12px;display:flex}.tp-titlebar .tp-title{min-width:0}.tp-browse{flex:none;align-items:center;gap:8px;display:flex}.tp-browse__count{font-variant-numeric:tabular-nums;color:var(--cie-paper-mute);white-space:nowrap;margin-right:4px;font-size:14px}.tp-detail__start{grid-area:start;justify-items:start;gap:10px;display:grid}.tp-start{width:100%;max-width:360px}.tp-start__hint{color:var(--cie-paper-mute);font-size:14px;line-height:1.45}@media (max-width:899px){.tp:has(.tp-detail){padding-bottom:calc(52px + 12px + max(12px, env(safe-area-inset-bottom)) + 32px)}.tp-detail__start{z-index:20;padding:12px max(16px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));background:var(--cie-paper);border-top:1px solid var(--m-line);position:fixed;bottom:0;left:0;right:0}.tp-start{max-width:none}.tp-start__hint{display:none}}.tp-detail__phone{flex-direction:column;grid-area:phone;align-items:center;gap:12px;min-width:0;display:flex}.tp-detail__scenes{grid-area:scenes}@media (max-width:899px){.tp-detail__scenes{justify-self:center;margin-top:-8px}.tp-detail__scenes .tp-picker__legend{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}}.tp-scenes{border:1px solid var(--m-line);border-radius:0;min-width:0;margin:0;padding:2px;display:inline-flex}.tp-scene{min-width:84px;height:44px;color:var(--cie-ink);cursor:pointer;border-radius:0;justify-content:center;align-items:center;padding:0 16px;font-size:15px;font-weight:500;display:inline-flex;position:relative}.tp-scene:has(.tp-radio:checked){background:var(--cie-ink);color:var(--cie-paper)}.tp-scene:has(.tp-radio:focus-visible){outline:2px solid var(--m-accent);outline-offset:2px}@media (hover:hover) and (pointer:fine){.tp-scene:not(:has(.tp-radio:checked)):hover{color:var(--m-accent-text)}}.tp-detail__show{flex-wrap:wrap;grid-area:show;align-items:flex-end;gap:12px 16px;min-width:0;display:flex}.tp-play{gap:8px}@media (max-width:899px){.tp-detail__show{justify-content:center;margin-top:-8px}.tp-detail__show .tp-picker__legend{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}}@media (prefers-reduced-motion:reduce){.tp-play{display:none}}.tp-swipe{touch-action:pan-y pinch-zoom}.tp-detail__note{grid-area:note;margin-top:-8px}@media (max-width:899px){.tp-detail__note{text-align:center;justify-self:center;max-width:34ch}}.tp-note__swipe{display:none}@media (pointer:coarse){.tp-note__swipe{display:inline}}.fp.tp-device{--fp-k:var(--tp-k);--fp-w:calc(393px * var(--tp-k));--fp-ratio:393 / 852;--fp-radius:var(--m-radius-device)}.fp.tp-device[data-device=desktop]{--fp-k:initial;--fp-w:100%;--fp-ratio:1280 / 800;--fp-radius:12px}.tp-detail[data-device=desktop] .tp-detail__phone{align-items:stretch;width:100%}.tp-detail[data-device=desktop] .tp-detail__phone :is(.tp-swipe,.tp-preview){width:100%}.tp-preview:not([hidden]){animation:tp-fade var(--m-dur-fast) var(--m-ease-out)}@keyframes tp-fade{0%{opacity:0}}.tp-detail__pickers{grid-area:pickers;gap:20px;min-width:0;display:grid}.tp-detail__footer{grid-area:footer;min-width:0}@media (min-width:900px){.tp-detail{--tp-k:.86;grid-template:"phone head""phone note""phone start""phone scenes""phone show""phone pickers""phone footer"1fr/auto minmax(0,1fr);gap:32px clamp(56px,7vw,104px);margin-top:16px}.tp-detail[data-device=desktop]{grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr)}@media (max-height:860px){.tp-detail{--tp-k:.78}}.tp-detail__phone{align-self:start;align-items:flex-start;position:sticky;top:24px}.tp-detail__note{margin-top:-20px}.tp-detail__head{padding-top:24px}.tp-detail__footer{align-self:end}}.tp-picker{border:0;min-width:0;margin:0;padding:0}.tp-picker__legend{color:var(--cie-ink);margin-bottom:10px;padding:0;font-size:15px;font-weight:500;line-height:1.3}.tp-picker__hint{color:var(--cie-paper-mute);margin-top:8px;font-size:14px;line-height:1.45}.tp-radio{opacity:0;cursor:pointer;width:100%;height:100%;margin:0;position:absolute;inset:0}.tp-chips{flex-wrap:wrap;gap:8px;display:flex}.tp-chip{white-space:nowrap;border:1px solid var(--m-line);border-radius:var(--m-radius-md);background:var(--cie-paper);width:auto;height:48px;color:var(--cie-ink);cursor:pointer;-webkit-tap-highlight-color:transparent;align-items:center;gap:10px;padding:0 16px 0 10px;font-size:15px;font-weight:500;line-height:1;display:inline-flex;position:relative}.tp-chip,.tp-scene{-webkit-user-select:none;user-select:none}.tp-chip:active{transform:scale(.97)}@media (prefers-reduced-motion:no-preference){.tp-chip{transition:transform var(--m-dur-fast) var(--m-ease-out)}}.tp-chip--scheme{justify-content:center;min-width:88px;padding:0 16px}@media (hover:hover) and (pointer:fine){.tp-chip:hover{border-color:var(--m-accent)}}.tp-chip:has(.tp-radio:checked){border-color:var(--cie-ink);box-shadow:inset 0 0 0 1px var(--cie-ink)}.tp-chip:has(.tp-radio:focus-visible){outline:2px solid var(--m-accent);outline-offset:2px}html .tp-radio:focus-visible{outline:none}.tp-gen{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.tp-gen__go{min-width:128px}.tp-gen__reset{padding-inline:12px}.tp-oneset{min-height:48px;color:var(--cie-ink);align-items:center;gap:10px;font-size:15px;line-height:1.35;display:flex}.tp-pager{border-top:1px solid var(--m-line);grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding-top:20px;display:grid}.tp-pager__link{border:1px solid var(--m-line);border-radius:var(--m-radius-md);min-height:64px;color:var(--cie-ink);align-content:center;gap:2px;min-width:0;padding:10px 14px;text-decoration:none;display:grid}.tp-pager__link--next{text-align:right}@media (hover:hover) and (pointer:fine){.tp-pager__link:hover{border-color:var(--m-accent)}}.tp-pager__dir{color:var(--cie-paper-mute);font-size:14px}.tp-pager__name{font-size:16px;font-weight:500}@media (prefers-reduced-motion:reduce){.tp-preview:not([hidden]){animation:none}.tp-card__preview,.tp-card__preview:before{transition:none}.tp-card:hover .tp-card__preview{transform:none}}
