/*
---
name: Colors
template: colors
tag:
 - variable
 - color
colors:
 - variable: "body"
   description: "The main background color"
   value: "#FFF"
 - variable: "text"
   description: "The default text color on the body"
   value: "#202023"
 - variable: "text-gray"
   description: "The default color for grayed-out text (e. g. for disabled items or subcaptions)"
   value: "#6A6A6A"
 - variable: "text-inverted"
   description: "The default inverted text color on the body"
   value: "#FFF"
 - variable: "action"
   description: "The main action color used for links and buttons"
   value: "#3031FE"
 - variable: "line"
   description: "The default color for lines (e. g. border lines)"
   value: "#e0e0e0"
 - variable: "success"
   description: "The color for positive feedback (e. g. confirmation messages)"
   value: "#00A685"
 - variable: "error"
   description: "The color for negative feedback (e. g. error messages)"
   value: "#DC153A"
---

Color variables that are used throughout the library are defined in the `theme.colors` hash.
By default, the following keys are defined:
*/
/*
---
name: rem
category: Functions/rem
tag:
 - function
---

Converts from `px` to `rem`, based on the assumption that `16px` are equivalent to `1rem`.

## Definition:

```stylus
rems = rem(pixels);
```
*/
/*
---
name: chooseMaxContrast
category: Functions/chooseMaxContrast
tag:
 - color
 - function
---

Given one or more foreground colors `fgs` and one background color `bg`,
returns the foreground color with the highest contrast ratio with respect to `bg`.

## Definition:

```stylus
fg = chooseMaxContrast(fgs, bg);
```

## Example:

```stylus
bg = theme.colors.footer;
fg = theme.colors.text;
fgInverted = theme.colors.text-inverted;

theme.components.color-box.footer = {
  background-color: (bg),
  color: (chooseMaxContrast((fg fgInverted), bg)),
}
```
*/
/*
---
name: Global settings
template: variables
tag:
 - variable
variables:
 - name: "text-line-height"
   description: "The line height of the body"
   default: "1.5rem"
 - name: "text-font"
   description: "The `font-family` to be used for regular text"
   default: "'Roboto', serif"
 - name: "heading-font"
   description: "The `font-family` to be used for headings (and possibly subcaptions)"
   default: "'Roboto', serif"
 - name: "text-rendering"
   description: "The `text-rendering` of the body"
   default: "optimizeLegibility"
 - name: "transition-duration"
   description: "The duration of the slide transitions"
   default: "0.3s"
 - name: "border-radius"
   description: "The default radius for borders"
   default: "2px"
---

The `theme.settings` hash defines several global settings for text formatting and styling:
*/
/*
---
name: Global Reset
category: Globals/Reset
tag:
 - reset
---

The lernetz css library has a set of reset style to have the same behaviour on every browser.
Furthermore this reset sets some global variables like:
 * body font-families
 * body line-height
 * body text-rendering
 * :root font-size for proper rem conversion
*/
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:inherit;font-weight:inherit;vertical-align:baseline}:root{font-size:16px}html{font-size:100%}body{line-height:1.5rem;color:;font-family:'Helvetica' , sans-serif;text-rendering:optimizeLegibility;background-color:;-webkit-font-smoothing:antialiased}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}select{vertical-align:middle}textarea{width:100%}table{border-collapse:collapse;border-spacing:0}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}a{text-decoration:none;color:inherit}img{display:block}ul,ol{margin-left:1.25rem}/*
---
name: Global helpers
category: Globals/Helpers
tag:
 - helper
 - box-model
 - display
 - position
 - visibility
compile: true
---

A collection of global helpers to control common styles.
Note that every global helper is perfixed with an underscore to indicate that this is a global rule according to rscss.

## Z-Index:

```jade
div._z-1 z-index: 1;
div._z-2 z-index: 2;
div._z-3 z-index: 3;
div._z-4 z-index: 4;
div._z-5 z-index: 5;
div._z-6 z-index: 6;
```

## Position:

```jade
div._absolute position: absolute;
div._relative position: relativ;
div._fixed position: fixed;
div._sticky position: sticky;
div._static position: static;
```

## Display:

```jade
div._block display: block;
div._inline-block display: inline-block;
div._inline display: inline;
div._flex display: flex;
div._inline-flex display: inline-flex;
div._table display: table;
div._table-row display: table-row;
div._table-cell display: table-cell;
div._hidden display: none;
```

## Visibility:

```jade
div._visible visibility: visible;
div._invisible visibility: hidden;
```
*/
._z-1{z-index:1}._z-2{z-index:2}._z-3{z-index:3}._z-4{z-index:4}._z-5{z-index:5}._z-6{z-index:6}._absolute{position:absolute}._relative{position:relative}._fixed{position:fixed}._sticky{position:sticky}._static{position:static}._block{display:block}._inline-block{display:inline-block}._inline{display:inline}._flex{display:flex}._inline-flex{display:inline-flex}._table{display:table}._table-row{display:table-row}._table-cell{display:table-cell}._hidden{display:none}._visible{visibility:visible}._invisible{visibility:hidden}/*
---
name: .flex-layout
category: Components/.flex-layout
tag:
 - component
 - layout
 - flexbox
compile: true
---

A layout system based on flexbox to align and distribute items horizontally and vertically.


# Alignment of items

The `-center` shortcut will center all items horizontal & vertical
```jade
div(style="height: 100px").flex-layout.-center
	div.aigis-debug Item 1
	div.aigis-debug Item 2
	div.aigis-debug Item 3
```

`-baseline` will align items based on their baseline. Works good if all the items contain text. 
```jade
div.flex-layout.-baseline
	div.aigis-debug Item
	div.aigis-debug(style="padding-top: 50px;padding-bottom: 30px;") Item 2
```

`-items-top` & `-items-bottom` will align the items either on top or bottom
```jade
div.flex-layout.-items-top
	div.aigis-debug Item 1
	div.aigis-debug(style="padding-top: 50px;padding-bottom: 30px;") Item 2
	div.aigis-debug Item 3
```
```jade
div.flex-layout.-items-bottom
	div.aigis-debug Item 1
	div.aigis-debug(style="padding-top: 50px;padding-bottom: 30px;") Item 2
	div.aigis-debug Item 3
```

`-items-center` will center the items vertically
```jade
div.flex-layout.-items-center
	div.aigis-debug Item 1
	div.aigis-debug(style="padding-top: 50px;padding-bottom: 30px;") Item 2
	div.aigis-debug Item 3
```

# Alignment of individual items

```jade
div(style="height: 100px").flex-layout
	div.aigis-debug.item.-top top
	div.aigis-debug.item.-center center
	div.aigis-debug.item.-bottom bottom
	div.aigis-debug.item.-stretch stretch
```

# Row mode

If you like a container that spans the full width with item that resize themself you can use the `-row` variant.

```jade
div.flex-layout.-row
	div.aigis-debug.item Item 1
	div.aigis-debug.item Item 2
	div.aigis-debug.item Item 3
```

If you like to fix an item based on its content width use the `-content` variant.
This is a shortcut for `-no-grow -no-shrink`. 
```jade
div.flex-layout.-row
	div.aigis-debug.item.-content
		img(src="http://via.placeholder.com/350x80")
	div.aigis-debug.item Item 2
	div.aigis-debug.item Item 3
```

You can control the sizing of the items with `-grow`, `-shrink`, `-no-grow`, `-no-shrink`.
```jade
div.flex-layout.-row
	div.aigis-debug.item.-no-shrink
		img(src="http://via.placeholder.com/350x80")
	div.aigis-debug.item.-no-grow Item 2
	div.aigis-debug.item Item 3
```


# Distribution of items

Use `-[v/h]-space-around` & `-[v/h]-space-between` to distribute the items in the flex container.

```jade
div.flex-layout.-h-space-around
	div.aigis-debug Item 1
	div.aigis-debug Item 2
	div.aigis-debug Item 3
```
```jade
div.flex-layout.-h-space-between
	div.aigis-debug Item 1
	div.aigis-debug Item 2
	div.aigis-debug Item 3
```
```jade
div(style="height: 200px").flex-layout.-v-space-around.-wrap
	div.aigis-debug Item longer 1
	div.aigis-debug Item longer 2
	div.aigis-debug Item longer 3
	div.aigis-debug Item longer 4
	div.aigis-debug Item longer 5
	div.aigis-debug Item longer 6
	div.aigis-debug Item longer 7
	div.aigis-debug Item longer 8
	div.aigis-debug Item longer 9
```
```jade
div(style="height: 200px").flex-layout.-v-space-between.-wrap
	div.aigis-debug Item longer 1
	div.aigis-debug Item longer 2
	div.aigis-debug Item longer 3
	div.aigis-debug Item longer 4
	div.aigis-debug Item longer 5
	div.aigis-debug Item longer 6
	div.aigis-debug Item longer 7
	div.aigis-debug Item longer 8
	div.aigis-debug Item longer 9
```

# Alignment of multiline items with wrap

If you have alot on items that wrap you can align the multilines with the following variants:
```jade
div.flex-layout.-wrap.-h-center
	div.aigis-debug Item longer 1
	div.aigis-debug Item longer 2
	div.aigis-debug Item longer 3
	div.aigis-debug Item longer 4
	div.aigis-debug Item longer 5
	div.aigis-debug Item longer 6
	div.aigis-debug Item longer 7
	div.aigis-debug Item longer 8
	div.aigis-debug Item longer 9
```
```jade
div.flex-layout.-wrap.-left
	div.aigis-debug Item longer 1
	div.aigis-debug Item longer 2
	div.aigis-debug Item longer 3
	div.aigis-debug Item longer 4
	div.aigis-debug Item longer 5
	div.aigis-debug Item longer 6
	div.aigis-debug Item longer 7
	div.aigis-debug Item longer 8
	div.aigis-debug Item longer 9
```
```jade
div.flex-layout.-wrap.-right
	div.aigis-debug Item longer 1
	div.aigis-debug Item longer 2
	div.aigis-debug Item longer 3
	div.aigis-debug Item longer 4
	div.aigis-debug Item longer 5
	div.aigis-debug Item longer 6
	div.aigis-debug Item longer 7
	div.aigis-debug Item longer 8
	div.aigis-debug Item longer 9
```
```jade
div(style="height: 200px").flex-layout.-wrap.-v-center
	div.aigis-debug Item longer 1
	div.aigis-debug Item longer 2
	div.aigis-debug Item longer 3
	div.aigis-debug Item longer 4
	div.aigis-debug Item longer 5
	div.aigis-debug Item longer 6
	div.aigis-debug Item longer 7
	div.aigis-debug Item longer 8
	div.aigis-debug Item longer 9
```
```jade
div(style="height: 200px").flex-layout.-wrap.-top
	div.aigis-debug Item longer 1
	div.aigis-debug Item longer 2
	div.aigis-debug Item longer 3
	div.aigis-debug Item longer 4
	div.aigis-debug Item longer 5
	div.aigis-debug Item longer 6
	div.aigis-debug Item longer 7
	div.aigis-debug Item longer 8
	div.aigis-debug Item longer 9
```
```jade
div(style="height: 200px").flex-layout.-wrap.-bottom
	div.aigis-debug Item longer 1
	div.aigis-debug Item longer 2
	div.aigis-debug Item longer 3
	div.aigis-debug Item longer 4
	div.aigis-debug Item longer 5
	div.aigis-debug Item longer 6
	div.aigis-debug Item longer 7
	div.aigis-debug Item longer 8
	div.aigis-debug Item longer 9
```




*/
.flex-layout{display:flex}.flex-layout.-inline{display:flex-inline}.flex-layout.-wrap{flex-wrap:wrap}.flex-layout.-row{flex-wrap:nowrap}.flex-layout.-row > .item{flex:1 1 auto}.flex-layout.-column{flex-direction:column}.flex-layout.-center{justify-content:center;align-items:center;align-content:center}.flex-layout.-baseline{align-items:baseline}.flex-layout.-left{justify-content:flex-start}.flex-layout.-right{justify-content:flex-end}.flex-layout.-top{align-content:flex-start}.flex-layout.-bottom{align-content:flex-end}.flex-layout.-v-center{align-content:center}.flex-layout.-v-space-between{align-content:space-between}.flex-layout.-v-space-around{align-content:space-around}.flex-layout.-h-center{justify-content:center}.flex-layout.-h-space-between{justify-content:space-between}.flex-layout.-h-space-around{justify-content:space-around}.flex-layout.-items-top{align-items:flex-start}.flex-layout.-items-bottom{align-items:flex-end}.flex-layout.-items-center{align-items:center}.flex-layout.-items-stretch{align-items:flex-stretch}.flex-layout > .item.-stretch{align-self:stretch}.flex-layout > .item.-top{align-self:flex-start}.flex-layout > .item.-center{align-self:center}.flex-layout > .item.-bottom{align-self:flex-end}.flex-layout > .item.-content{flex:none}.flex-layout > .item.-grow{flex-grow:1}.flex-layout > .item.-shrink{flex-shrink:1}.flex-layout > .item.-no-grow{flex-grow:0}.flex-layout > .item.-no-shrink{flex-shrink:0}/*
---
name: .grid-layout
category: Components/.grid-layout
tag:
 - component
 - layout
 - grid
 - responsive
 - flexbox
compile: true
---

A grid layout system based on flexbox. It provides sizing variants to size on different percentages.


## Percentage based sizing

The easiest use case is to use simple `.item -w1`, `.item -w1-2`, `.item -w1-3`, `.item -w1-4` for a percentage based side-by-side rendering.

```jade
div.grid-layout
	div.item.-w1
		div.aigis-debug item -w1
	div.item.-w1-2 
		div.aigis-debug item -w1-2
	div.item.-w1-2
		div.aigis-debug item -w1-2
	div.item.-w1-3
		div.aigis-debug item -w1-3
	div.item.-w2-3
		div.aigis-debug item -w2-3
	div.item.-w1-4
		div.aigis-debug item -w1-4
	div.item.-w1-2
		div.aigis-debug item -w1-2
	div.item.-w1-4
		div.aigis-debug item -w1-4
```

## Layouts on different devices

The breakpoints for different screen sizes are specified in the global settings `theme.settings.breakpoints` and can be overwritten in `theme.components.grid-layout.breakpoints`.
The default settings define breakpoints with labels: `.-small-X-X`, `.-medium-X-X`, `.-large-X-X`.

```jade
div.grid-layout
	div.item.-w1.-small-1-3.-medium-1-2.-large-1-4
		div.aigis-debug item -w1 -small-1-3 -medium-1-2 -large-1-4
	div.item.-w1.-small-1-3.-medium-1-2.-large-1-4
		div.aigis-debug item -w1 -small-1-3 -medium-1-2 -large-1-4
	div.item.-w1-2.-small-1-3.-medium-1-2.-large-1-4
		div.aigis-debug item -w1-2 -small-1-3 -medium-1-2 -large-1-4
	div.item.-w1-2.-small-1.-medium-1-2.-large-1-4
		div.aigis-debug item -w1-2 -small-1 -medium-1-2 -large-1-4
```


## Gutter

If you need a spacing between the columns add the `-gutter` variant.
The size of the gutter is specified in the `grid-gutter`variable.

```jade
div.grid-layout.-gutter
	div.item.-w1-4
		div.aigis-debug col -w1-4
	div.item.-w1-4
		div.aigis-debug col -w1-4
	div.item.-w1-2
		div.aigis-debug col -w1-2
```


## Reverse order

To reverse the order in which the columns are displayed, you can add the modifier class `.-reverse` to your table-grid.
The columns will be in DOM order when viewport switches to small layout.

```jade
div.grid-layout.-reverse
	div.item.-w1-4
		div.aigis-debug First column in DOM
	div.item.-w1-4
		div.aigis-debug Second column in DOM
	div.item.-w1-4
		div.aigis-debug Third column in DOM
	div.item.-w1-4
		div.aigis-debug Fourth column in DOM
```

## Vertical centering

You can vertical center with the help of the `flex-layout` component.

```jade
div.grid-layout.flex-layout
	div.item.-w1-4
		div.aigis-debug A column with a lot of content that should wrap on fixed size.
	div.item.-bottom
		div.aigis-debug bottom
	div.item.-center
		div.aigis-debug center
	div.item.-stretch
		div.aigis-debug(style="height:100%") stretch
```

*/
.grid-layout{display:flex;flex-wrap:wrap}.grid-layout.-gutter{margin:-.625rem -.9375rem}.grid-layout.-gutter > .item{padding:.625rem .9375rem}.grid-layout.-reverse{flex-direction:row-reverse}.grid-layout > .item.-w1{flex:0 0 100%;max-width:100%}.grid-layout > .item.-w1-2{flex:0 0 50%;max-width:50%}.grid-layout > .item.-w1-3{flex:0 0 33.333333333333336%;max-width:33.333333333333336%}.grid-layout > .item.-w2-3{flex:0 0 66.66666666666667%;max-width:66.66666666666667%}.grid-layout > .item.-w1-4{flex:0 0 25%;max-width:25%}.grid-layout > .item.-w3-4{flex:0 0 75%;max-width:75%}@media all and (min-width:40rem){.grid-layout > .item.-small-1{flex:0 0 100%;max-width:100%}.grid-layout > .item.-small-1-2{flex:0 0 50%;max-width:50%}.grid-layout > .item.-small-1-3{flex:0 0 33.333333333333336%;max-width:33.333333333333336%}.grid-layout > .item.-small-2-3{flex:0 0 66.66666666666667%;max-width:66.66666666666667%}.grid-layout > .item.-small-1-4{flex:0 0 25%;max-width:25%}.grid-layout > .item.-small-3-4{flex:0 0 75%;max-width:75%}}@media all and (min-width:48rem){.grid-layout > .item.-medium-1{flex:0 0 100%;max-width:100%}.grid-layout > .item.-medium-1-2{flex:0 0 50%;max-width:50%}.grid-layout > .item.-medium-1-3{flex:0 0 33.333333333333336%;max-width:33.333333333333336%}.grid-layout > .item.-medium-2-3{flex:0 0 66.66666666666667%;max-width:66.66666666666667%}.grid-layout > .item.-medium-1-4{flex:0 0 25%;max-width:25%}.grid-layout > .item.-medium-3-4{flex:0 0 75%;max-width:75%}}@media all and (min-width:79.9375rem){.grid-layout > .item.-large-1{flex:0 0 100%;max-width:100%}.grid-layout > .item.-large-1-2{flex:0 0 50%;max-width:50%}.grid-layout > .item.-large-1-3{flex:0 0 33.333333333333336%;max-width:33.333333333333336%}.grid-layout > .item.-large-2-3{flex:0 0 66.66666666666667%;max-width:66.66666666666667%}.grid-layout > .item.-large-1-4{flex:0 0 25%;max-width:25%}.grid-layout > .item.-large-3-4{flex:0 0 75%;max-width:75%}}/*
---
name: .image-responsive
category: Components/.image-responsive
tag:
 - component
 - responsive
 - image
 - media
compile: true
---

This class makes the image scaling to its max width.

```jade
img.image-responsive(src='http://www.byui.edu/images/agriculture-life-sciences/flower.jpg')
```

## Variants

`.-full` forces the picture to span to 100% of the parent

```jade
img.image-responsive.-full(src='http://www.byui.edu/images/agriculture-life-sciences/flower.jpg')
```
*/
.image-responsive{max-width:100%;height:auto;display:block}.image-responsive.-full{width:100%}.image-responsive.-inset{max-height:100%}/*
---
name: .svg-icon
category: Components/.svg-icon
template: icons
tag:
 - component
 - symbol
 - icon
 - media
 - svg
compile: true
---

Defines common SVG icon/symbol sizes and presentation styles.

## Default

The <span class="variable">-default</span> variant applies automatically (but can be specified explicitly if desired).

```jade
div(style="display: inline-block; border: solid 1px #ccc;")
  svg.svg-icon
    use(xlink:href="#stars-icon")

div(style="display: inline-block; border: solid 1px #ccc;")
  svg.svg-icon.-default
    use(xlink:href="#stars-icon")
```

## -scale

The <span class="variable">-span</span> variant will automatically fit (scale & center) the SVG icon into its parent container.

```jade
div(style="display:inline-block; border: solid 1px #ccc; width:50px; height:100px")
  svg.svg-icon.-scale
    use(xlink:href="#stars-icon")

div(style="display:inline-block; border: solid 1px #ccc; width:200px; height:100px")
  svg.svg-icon.-scale
    use(xlink:href="#stars-icon")
```


*/
.svg-icon{fill:currentColor;display:block;width:1.5rem;height:1.5rem}.svg-icon.-inline{display:inline-block}.svg-icon.-scale{width:100%;height:100%}/*
---
name: .text-style
category: Components/.text-style
tag:
 - component
 - text
compile: true
---

A text styling component for different text styles

## Default heading

```jade
div.text-style Default heading
```

## H1
```jade
div.text-style.-h1 The h1 header

```

## H2
```jade
div.text-style.-h2 The h2 header
```

## H3
```jade
div.text-style.-h3 The h3 header
```

## Bold
```jade
div.text-style.-bold Bold text
```

## Align center
```jade
div.text-style.-center Centered text
```

## Align right
```jade
div.text-style.-right Right aligned text
```

*/
.text-style.-a{text-decoration:underline}.text-style.-b{font-family:EuclidCircularB-Bold-WebS;font-weight:700}.text-style.-i{font-style:italic}.carousel-box{position:relative}.carousel-box > .content{overflow:hidden;position:relative}.carousel-box > .dots{position:absolute;width:100%;bottom:-2rem;z-index:3}.carousel-box > .dots > div > .dot{background-color:#000;height:.625rem;width:.625rem;border-radius:50%;margin:0 .1875rem;cursor:pointer}.carousel-box > .dots > div > .dot.-active,.carousel-box > .dots > div > .dot:hover{background-color:#808080}.carousel-box > .nav{position:absolute;cursor:pointer;background-color:#fff;top:50%;z-index:3}.carousel-box > .nav.-left{left:0}.carousel-box > .nav.-left:hover{opacity:1}.carousel-box > .nav.-right{right:0}.carousel-box > .nav.-right:hover{opacity:1}.crossfade-box{transition:height .4s}.crossfade-box > .front{position:absolute;width:100%;transition:opacity 0s;z-index:2}.crossfade-box > .front.-do-transition{transition:opacity .4s;opacity:0}.crossfade-box > .back{position:absolute;width:100%;z-index:-1}/*
---
name: DropDown
category: UI/DropDown
tag:
 - component
 - dropdown
compile: true
---

A dropdown list to select one option out of many in the list.

## Example
```jade
div(view='DropDown',items='[[ [ { "label":"option 1", "value":1 }, { "label":"option 2", "value":2 }, { "label":"option 3", "value":3 } ] ]]')
```
*/
.drop-down:not(.-open ) > .list{display:none}.drop-down.-float{position:relative}.drop-down.-float > .list{position:absolute;z-index:1000}.drop-down.-float > .list.-v-t-l{bottom:100%}.drop-down.-float > .list.-v-t-r{right:0;bottom:100%}.drop-down.-float > .list.-h-t-r{right:0;bottom:100%;transform:translate(100%,100%)}.drop-down.-float > .list.-h-b-r{right:0;bottom:0;transform:translate(100%,0%)}.drop-down.-float > .list.-v-b-r{right:0}.drop-down.-float > .list.-h-t-l{top:0;transform:translate(-100%,0)}.drop-down.-float > .list.-h-b-l{bottom:0;transform:translate(-100%,0)}.about-box{background-color:#f7c809}.about-box > .element-layout{padding-top:2rem;padding-bottom:2rem}.about-box > .element-layout > .title{margin-bottom:1rem}.about-box > .element-layout > .about-grid{margin-bottom:3rem}.about-box .media{margin-bottom:1rem}.about-box .link-entry{margin-right:.5rem}.about-box .artist-website{margin-bottom:1.5rem}.about-box .artist-icon{margin-right:1rem}.about-box .overline{font-family:"EuclidCircularB-Bold-WebS";font-size:15px;font-weight:700;line-height:22px;letter-spacing:2.5px;color:#232323;margin-bottom:2rem}@media all and (max-width:48rem){.about-box .overline{font-family:"EuclidCircularB-Bold-WebS";font-size:14px;font-weight:700;line-height:20px}}@media all and (max-width:40rem){.about-box .overline{font-family:"EuclidCircularB-Bold-WebS";font-size:14px;font-weight:700;line-height:20px}}.about-box .title{font-family:"kg_happy_solidregular";font-size:32px;font-weight:400;line-height:46px;letter-spacing:-.64px;color:#232323}@media all and (max-width:48rem){.about-box .title{font-family:"kg_happy_solidregular";font-size:24px;font-weight:400;line-height:34px;letter-spacing:-.48px}}@media all and (max-width:40rem){.about-box .title{font-family:"kg_happy_solidregular";font-size:22px;font-weight:400;line-height:32px;letter-spacing:0}}.about-box .description,.about-box .description p,.about-box .description li{font-family:"EuclidCircularB-Regular-WebS";font-size:20px;font-weight:400;line-height:30px;color:#232323}@media all and (max-width:48rem){.about-box .description,.about-box .description p,.about-box .description li{font-family:"EuclidCircularB-Regular-WebS";font-size:18px;font-weight:400;line-height:26px}}@media all and (max-width:40rem){.about-box .description,.about-box .description p,.about-box .description li{font-family:"EuclidCircularB-Regular-WebS";font-size:18px;font-weight:400;line-height:26px}}.about-box .description a,.about-box .description p a,.about-box .description li a{text-decoration:underline}.about-box .link-title{font-family:"kg_happy_solidregular";font-size:17px;font-weight:400;line-height:25px;letter-spacing:-.34px;color:#232323}@media all and (max-width:48rem){.about-box .link-title{font-family:"kg_happy_solidregular";font-size:15px;font-weight:400;line-height:23px;letter-spacing:-.3px}}@media all and (max-width:40rem){.about-box .link-title{font-family:"kg_happy_solidregular";font-size:15px;font-weight:400;line-height:23px;letter-spacing:-.3px}}.about-box .info-title{font-family:"kg_happy_solidregular";font-size:22px;font-weight:400;line-height:32px;letter-spacing:-.44px;color:#232323;margin-bottom:1rem}@media all and (max-width:48rem){.about-box .info-title{font-family:"kg_happy_solidregular";font-size:20px;font-weight:400;line-height:30px;letter-spacing:-.4px}}@media all and (max-width:40rem){.about-box .info-title{font-family:"kg_happy_solidregular";font-size:20px;font-weight:400;line-height:30px;letter-spacing:-.4px}}.about-box .name{font-family:"EuclidCircularB-Regular-WebS";font-size:20px;font-weight:400;line-height:30px;color:#232323}@media all and (max-width:48rem){.about-box .name{font-family:"EuclidCircularB-Regular-WebS";font-size:18px;font-weight:400;line-height:26px}}@media all and (max-width:40rem){.about-box .name{font-family:"EuclidCircularB-Regular-WebS";font-size:18px;font-weight:400;line-height:26px}}.about-box .link-list{margin-bottom:4rem}.about-box .link-list .link-item:first-child{border-top:3px solid #232323}.about-box .link-list .link-item{border-bottom:3px solid #232323;padding:1rem}.about-box .link-list .link-item .icon{width:32px;height:32px}.about-box .icon{width:44px;height:44px;color:#232323}.about-box .icon:hover{color:#e67699}.about-box .icon.-website{width:24px;height:25px}.additional-song-component{margin-bottom:8rem}.additional-song-component .header .title{padding:1rem}.additional-song-component .header .toggle{margin-right:1rem}.additional-song-component .song{padding-top:1.5rem;padding-left:1rem;padding-right:1rem}.additional-song-component .song .title,.additional-song-component .download-row{margin-bottom:1rem}.additional-song-component .download-item .svg-icon,.additional-song-component .link-item{margin-right:1rem}.additional-song-component .line{margin:1rem}.additional-song-component .header{border:3px solid #232323;border-radius:2px;background-color:#f7c809;transition:background-color .3s linear}.additional-song-component .header:hover{cursor:pointer}.additional-song-component .header .title{font-family:"kg_happy_solidregular";font-size:22px;font-weight:400;line-height:32px;letter-spacing:-.44px;color:#232323}@media all and (max-width:48rem){.additional-song-component .header .title{font-family:"kg_happy_solidregular";font-size:20px;font-weight:400;line-height:30px;letter-spacing:-.4px}}@media all and (max-width:40rem){.additional-song-component .header .title{font-family:"kg_happy_solidregular";font-size:20px;font-weight:400;line-height:30px;letter-spacing:-.4px}}.additional-song-component .header .toggle .icon{width:14px;height:9px;transform:rotate(0deg);transition:transform .3s linear}.additional-song-component .container{overflow:hidden;max-height:0;transition:max-height .3s linear;background-color:#25163b}.additional-song-component .container .song .title{font-family:"kg_happy_solidregular";font-size:22px;font-weight:400;line-height:32px;letter-spacing:-.44px;color:#fff}@media all and (max-width:48rem){.additional-song-component .container .song .title{font-family:"kg_happy_solidregular";font-size:20px;font-weight:400;line-height:30px;letter-spacing:-.4px}}@media all and (max-width:40rem){.additional-song-component .container .song .title{font-family:"kg_happy_solidregular";font-size:20px;font-weight:400;line-height:30px;letter-spacing:-.4px}}.additional-song-component .container .download-item .text{font-family:"EuclidCircularB-Regular-WebS";font-size:20px;font-weight:400;line-height:30px;color:#e1e1e1}@media all and (max-width:48rem){.additional-song-component .container .download-item .text{font-family:"EuclidCircularB-Regular-WebS";font-size:18px;font-weight:400;line-height:26px}}@media all and (max-width:40rem){.additional-song-component .container .download-item .text{font-family:"EuclidCircularB-Regular-WebS";font-size:18px;font-weight:400;line-height:26px}}.additional-song-component .container .download-item:hover{color:#e67699}.additional-song-component .container .download-item:hover .title,.additional-song-component .container .download-item:hover .hint,.additional-song-component .container .download-item:hover .text{color:#e67699}.additional-song-component .container .link-item .icon{color:#fff;width:44px;height:44px}.additional-song-component .container .link-item .icon:hover{color:#e67699;cursor:pointer}.additional-song-component .container .line{border-top:1px dashed #fff}.additional-song-component.-opened .header{background-color:#fff}.additional-song-component.-opened .header .toggle .icon{transform:rotate(180deg)}.additional-song-component.-opened .container{height:auto;max-height:1000px}@media all and (max-width:48rem){.additional-song-component{margin-bottom:6rem}}.audio-player-element{z-index:10}.audio-player-element .progresstext{margin-left:1.5rem;margin-right:1.5rem}.audio-player-element > .title{font-family:"EuclidCircularB-Bold-WebS";font-size:26px;font-weight:700;line-height:36px;color:#fff;margin-bottom:1rem}.audio-player-element .audio-item{border-top:3px solid #fff;padding:1rem}.audio-player-element .audio-item .title{font-family:"EuclidCircularB-Bold-WebS";font-size:20px;font-weight:700;line-height:30px;color:#fff}.audio-player-element .audio-item:last-child{border-bottom:3px solid #fff}.audio-player-element .audio-item .icon{color:#e67699;width:32px;height:32px}.audio-player-element .audio-item .icon:hover{cursor:pointer}.audio-player-element .audio-item .icon._hidden{display:none}.audio-player-element .audio-item .progressbar-container{cursor:pointer}.audio-player-element .audio-item .progressbar-container .progressbar .range{display:block;-webkit-appearance:none;width:100%;height:3px;border-radius:2px;background-color:rgba(255,255,255,0.4);outline:none}.audio-player-element .audio-item .progressbar-container .progressbar .range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:15px;height:15px;border-radius:50%;background:#e67699;cursor:pointer}.audio-player-element .audio-item .progressbar-container .progressbar .range::-moz-range-thumb{width:15px;height:15px;border-radius:50%;background:#e67699;cursor:pointer}@media all and (max-width:48rem){.audio-player-element > .title{font-size:22px;line-height:36px}.audio-player-element .audio-item .title{font-size:18px;line-height:28px}}@media all and (max-width:40rem){.audio-player-element > .title{font-size:20px;line-height:30px}.audio-player-element .progressbar,.audio-player-element .progresstext{display:none}}.element-layout.audio-player-element{margin-bottom:4rem}.background-block{border-top:3px solid #232323}.button.-filled,.button.-outline,.button.-text{font-family:"EuclidCircularB-Semibold-WebS";font-size:20px;font-weight:600;line-height:24px;display:inline-flex;align-items:center;justify-content:center;gap:.75rem;height:48px;padding:0 1rem;border:0;border-radius:32px;white-space:nowrap;text-decoration:none;cursor:pointer;transition:background-color .3s,color .3s,border-color .3s}.button.-filled > .svg-icon,.button.-outline > .svg-icon,.button.-text > .svg-icon{width:24px;height:24px;color:currentColor}.button.-filled.-xlarge,.button.-outline.-xlarge,.button.-text.-xlarge{height:60px}.button.-filled.-small,.button.-outline.-small,.button.-text.-small{font-family:"EuclidCircularB-Semibold-WebS";font-size:16px;font-weight:600;line-height:16px;letter-spacing:.5px;gap:.5rem;height:32px;padding:0 .75rem;border-radius:24px}.button.-filled.-small > .svg-icon,.button.-outline.-small > .svg-icon,.button.-text.-small > .svg-icon{width:16px;height:16px}.button.-filled.-full,.button.-outline.-full,.button.-text.-full{display:flex;width:100%}.button.-filled.-pink{background-color:#e67699;color:#fff}.button.-filled.-pink:hover{background-color:#e984a3}.button.-filled.-pink:active{background-color:#e67699}.button.-filled.-pink.-disabled{opacity:.4;pointer-events:none}.button.-filled.-yellow{background-color:#f7c809;color:#25163b}.button.-filled.-yellow:hover{background-color:#f8ce22}.button.-filled.-yellow:active{background-color:#f7c809}.button.-outline{background-color:transparent;border:2px solid currentColor}.button.-outline.-small{border-width:1.5px}.button.-outline.-small:hover,.button.-outline.-small:active{border-width:2px}.button.-outline.-pink{color:#e67699;border-color:#e67699}.button.-outline.-pink:hover,.button.-outline.-pink:active{background-color:#e67699;color:#fff}.button.-outline.-dark-purple{color:#25163b;border-color:#25163b}.button.-outline.-dark-purple:hover,.button.-outline.-dark-purple:active{background-color:#25163b;color:#fff}.button.-outline.-white{color:#fff;border-color:#fff}.button.-outline.-white:hover,.button.-outline.-white:active{background-color:#fff;color:#25163b}.button.-text{padding:0;background-color:transparent}.button.-text.-pink{color:#e67699}.button.-text.-pink:hover{color:#e984a3}.button.-text.-pink:active{color:#e67699}.button.-text.-white{color:#fff}.button.-text.-white:hover{color:#e984a3}.button.-text.-white:active{color:#e67699}.carousel-box{background-color:#e1e1e1;background-size:cover}.carousel-box > .container{display:grid}.carousel-box .dots{bottom:2rem;gap:4px}.carousel-box .dots div .dot{border-radius:50%;margin:0 4px;cursor:pointer;width:10px;height:10px;background-color:#fff}.carousel-box .dots div .dot:hover,.carousel-box .dots div .dot.-active{background-color:#fff}.carousel-box .dots div .dot.-active{width:16px;height:16px}.carousel-box .dots._hidden,.carousel-box .dots .svg-icon._hidden{display:none}.carousel-box .dots .svg-icon.-play,.carousel-box .dots .svg-icon.-pause{width:32px;height:32px;color:#fff}.carousel-box .dots .svg-icon.-play:hover,.carousel-box .dots .svg-icon.-pause:hover{cursor:pointer;color:#e67699}.carousel-box .slide{position:relative;grid-area:1/1;overflow:hidden;background-repeat:no-repeat;background-size:cover;background-position:center top;width:100%;padding-bottom:6rem;opacity:0;transition:opacity 2s linear}.carousel-box .slide.-selected{opacity:1}.carousel-box .slide:not(.-selected){pointer-events:none}.carousel-box .slide .content{display:flex;flex-wrap:nowrap;align-items:center;justify-content:center;gap:2rem;margin:0;padding-top:4rem}.carousel-box .slide .content > .item{width:auto;max-width:none;padding:0;margin:0}.carousel-box .slide .content > .item:first-child{display:block;flex:0 0 48%}.carousel-box .slide .content > .item:last-child{flex:1 1 0;min-width:0}.carousel-box .slide .image{display:block;width:100%;height:auto;aspect-ratio:553/342;-o-object-fit:contain;object-fit:contain}.carousel-box .slide .title{font-family:"kg_happy_solidregular";font-size:50px;font-weight:400;line-height:68px;letter-spacing:-1px;margin-bottom:1.5rem}@media all and (max-width:48rem){.carousel-box .slide .title{font-family:"kg_happy_solidregular";font-size:40px;font-weight:400;line-height:52px;letter-spacing:-.8px}}@media all and (max-width:40rem){.carousel-box .slide .title{font-family:"kg_happy_solidregular";font-size:30px;font-weight:400;line-height:42px;letter-spacing:-.6px}}.carousel-box .slide.simple-slide .text{font-family:"EuclidCircularB-Regular-WebS";font-size:26px;font-weight:400;line-height:36px;margin-bottom:1.5rem}@media all and (max-width:48rem){.carousel-box .slide.simple-slide .text{font-family:"EuclidCircularB-Regular-WebS";font-size:24px;font-weight:400;line-height:34px}}@media all and (max-width:40rem){.carousel-box .slide.simple-slide .text{font-family:"EuclidCircularB-Regular-WebS";font-size:24px;font-weight:400;line-height:34px}}.carousel-box .slide.simple-slide .text p{margin:0;font:inherit}.carousel-box .slide.simple-slide .author{font-family:"EuclidCircularB-Regular-WebS";font-size:15px;font-weight:400;line-height:22px}@media all and (max-width:48rem){.carousel-box .slide.simple-slide .author{font-family:"EuclidCircularB-Regular-WebS";font-size:14px;font-weight:400;line-height:20px}}@media all and (max-width:40rem){.carousel-box .slide.simple-slide .author{font-family:"EuclidCircularB-Regular-WebS";font-size:14px;font-weight:400;line-height:20px}}.carousel-box .slide.-light{color:#25163b}.carousel-box .slide.-light.simple-slide .text p,.carousel-box .slide.-light.simple-slide .author{color:#25163b}.carousel-box .slide.-dark{color:#fff}.carousel-box .slide.-dark.simple-slide .text,.carousel-box .slide.-dark.simple-slide .text p,.carousel-box .slide.-dark.simple-slide .author{color:#e1e1e1}.carousel-box .slide.-dark .button.-outline{color:#fff}.carousel-box .slide.-dark .button.-outline:hover{background-color:#fff;color:#232323}@media all and (max-width:40rem){.carousel-box .slide .content{flex-direction:column;align-items:stretch}.carousel-box .slide .content > .item:first-child{flex:0 0 auto;width:100%}.carousel-box .slide .content > .item:last-child{flex:0 0 auto}}.code-input .input{width:100%;height:44px;border-radius:2px;border:3px solid #232323}.code-input .error{color:#f7c809}.container-page{display:flex;min-height:100vh;flex-direction:column}.container-page .main-content{flex:1}.content-block{border-top:3px solid #232323}.content-block .image-responsive{margin:auto}.download-container .tabs .tab{padding:1rem}.download-container .content > .content{margin-bottom:1.5rem;padding-top:1.5rem}.download-container .download-item,.download-container .text-item,.download-container .url-item{margin-left:1.5rem;margin-right:1.5rem}.download-container .url-item{margin-bottom:1rem}.download-container.-single .tabs .tab{cursor:auto}.download-container .tabs{background-color:#25163b;border:3px solid #fff}.download-container .tabs .tab{font-family:"EuclidCircularB-Bold-WebS";font-size:26px;font-weight:700;line-height:36px;letter-spacing:2.5px;color:#fff;cursor:pointer}.download-container .tabs .tab.-selected{background-color:#fff;color:#2e2e2e}.download-container .tabs .tab.-left{border-top-left-radius:2px}.download-container .tabs .tab.-right{border-top-right-radius:2px;text-align:right}.download-container .tabs .tab.-links{border-left:3px solid #fff}.download-container .tabs .tab.-media{border-right:3px solid #fff}.download-container .tabs .tab .mobile{display:none}.download-container .content{background-color:#514562}.download-container .content .element:last-child{padding-bottom:10px}.download-container .download-item{color:#fff}.download-container .download-item:hover{cursor:pointer;color:#e67699}.download-container .download-item:hover .title,.download-container .download-item:hover .hint{color:#e67699}.download-container .text-item .title,.download-container .download-item .title{font-family:"EuclidCircularB-Bold-WebS";font-size:26px;font-weight:700;line-height:36px;color:#fff}.download-container .text-item a,.download-container .download-item a{text-decoration:underline}.download-container .text-item .svg-icon,.download-container .download-item .svg-icon{min-width:24px;min-height:24px}.download-container .text-item .line,.download-container .download-item .line{border-top:1px dashed #fff}.download-container .download-item .hint,.download-container .text-item .text,.download-container .text-item .text p{font-family:"EuclidCircularB-Medium-WebS";font-size:20px;font-weight:500;line-height:30px;color:#e1e1e1}.download-container .text-item .text ul,.download-container .text-item .text ol{margin-bottom:16px}@media all and (max-width:48rem){.download-container .tabs .tab,.download-container .text-item .title,.download-container .download-item .title{font-size:22px;line-height:36px}.download-container .download-item .hint,.download-container .text-item .text,.download-container .text-item .text p{font-size:18px;line-height:28px}.download-container .tabs .tab .mobile{display:block}.download-container .tabs .tab .desktop{display:none}}@media all and (max-width:40rem){.download-container .tabs .tab,.download-container .text-item .title,.download-container .download-item .title{font-size:20px;line-height:30px}}.element-layout.download-container{padding-bottom:4rem}.download-item .head,.text-item .head{margin-bottom:1rem}.download-item .head .svg-icon,.text-item .head .svg-icon{margin-right:1rem;margin-top:.25rem}.download-item .line,.text-item .line{margin-top:1rem;margin-bottom:1rem}.drop-down{display:inline-block;position:relative}.drop-down.-open > .button.-outline.-white{background-color:#fff;color:#25163b}.drop-down .list{position:absolute;top:100%;left:0;z-index:10;width:-moz-max-content;width:max-content;margin-top:.5rem;padding:1rem;border-radius:16px;background-color:#fff;color:#25163b}.drop-down .list .item{display:flex;align-items:center;gap:.5rem;padding:.5rem 0;cursor:pointer;transition:color .3s}.drop-down .list .item:hover{color:#e67699}.drop-down .list .name{font-family:"EuclidCircularB-Semibold-WebS";font-size:16px;font-weight:600;line-height:16px;letter-spacing:.5px}.drop-down .list .svg-icon{flex:none;width:24px;height:24px}.element-layout{max-width:80rem;padding-left:4rem;padding-right:4rem;margin:0 auto;padding-top:0;padding-bottom:0;transition:all .3s ease-in-out}@media all and (max-width:79.9375rem){.element-layout{max-width:76rem;padding-left:2rem;padding-right:2rem}}@media all and (max-width:40rem){.element-layout{padding-left:1.5rem;padding-right:1.5rem}}.element-layout.-extended{max-width:1500px;padding:0 0}.element-layout.-full{max-width:100%;padding:0 0;margin:0}.element-layout.-handbook{margin-top:179px;max-width:758px;width:100%;padding:0 16px}.error-page{margin:1rem}.error-page .title{font-family:"kg_happy_solidregular";font-size:50px;font-weight:400;line-height:68px;letter-spacing:-1px;margin-bottom:1rem}@media all and (max-width:48rem){.error-page .title{font-family:"kg_happy_solidregular";font-size:40px;font-weight:400;line-height:52px;letter-spacing:-.8px}}@media all and (max-width:40rem){.error-page .title{font-family:"kg_happy_solidregular";font-size:30px;font-weight:400;line-height:42px;letter-spacing:-.6px}}.error-page .text{font-family:"EuclidCircularB-Regular-WebS";font-size:26px;font-weight:400;line-height:36px}@media all and (max-width:48rem){.error-page .text{font-family:"EuclidCircularB-Regular-WebS";font-size:24px;font-weight:400;line-height:34px}}@media all and (max-width:40rem){.error-page .text{font-family:"EuclidCircularB-Regular-WebS";font-size:24px;font-weight:400;line-height:34px}}.footer-component{position:relative;z-index:6;background-color:#25163b;color:#f8f8f9;border-top:2px solid #665c76;overflow:hidden}.footer-component .inner{position:relative;max-width:125rem;margin:0 auto;padding:2rem 4rem}.footer-component .top{display:flex;align-items:flex-start;justify-content:space-between;gap:2rem}.footer-component .claim{font-family:"kg_happy_solidregular";font-size:32px;font-weight:400;line-height:46px;letter-spacing:-.64px;flex:1;max-width:808px}.footer-component .guitar{position:absolute;right:23.375rem;bottom:23px;width:189px;height:188px}.footer-component .contact{font-family:"EuclidCircularB-Medium-WebS";font-size:20px;font-weight:500;line-height:30px;flex:none}.footer-component .mail{display:block;margin-top:1.5rem}.footer-component .phone{display:block}.footer-component .meta{font-family:"EuclidCircularB-Bold-WebS";font-size:15px;font-weight:700;line-height:22px;margin-top:3rem}.footer-component a{color:#fff}.footer-component a:hover{color:#e67699}.footer-component .meta a:not(:hover){color:#f8f8f9}@media all and (max-width:48rem){.footer-component .inner{padding:2rem 2rem;min-height:302px}.footer-component .top{gap:3rem}.footer-component .claim{font-family:"EuclidCircularB-Bold-WebS";font-size:30px;font-weight:700;line-height:40px}.footer-component .contact{font-family:"EuclidCircularB-Medium-WebS";font-size:18px;font-weight:500;line-height:26px}.footer-component .mail{margin-top:1rem}.footer-component .meta{font-family:"EuclidCircularB-Bold-WebS";font-size:14px;font-weight:700;line-height:20px}.footer-component .guitar{right:20.1875rem;bottom:2px}}@media all and (max-width:40rem){.footer-component .inner{padding:2rem 1.5rem;min-height:0}.footer-component .top{flex-direction:column;gap:2rem}.footer-component .claim{font-family:"EuclidCircularB-Bold-WebS";font-size:28px;font-weight:700;line-height:38px}.footer-component .contact{font-family:"EuclidCircularB-Medium-WebS";font-size:18px;font-weight:500;line-height:26px}.footer-component .mail{margin-top:0}.footer-component .meta{font-family:"EuclidCircularB-Bold-WebS";font-size:14px;font-weight:700;line-height:20px;padding-right:132px}.footer-component .guitar{right:1rem;bottom:.5rem;width:120px;height:119px}}.handbook-foldable{display:flow-root;margin-bottom:16px;border-radius:24px;color:#25163b}.handbook-foldable .header{background-color:#fff;padding:24px;border-radius:24px;cursor:pointer}.handbook-foldable .header:hover{color:#e67699;background-color:#e9e8eb}.handbook-foldable .header .flex-layout > .svg-icon{width:32px;height:32px}.handbook-foldable .header .title{font-family:"kg_happy_solidregular";font-size:22px;font-weight:400;line-height:32px;letter-spacing:-.44px;margin-left:1rem}.handbook-foldable .content{margin:0 32px;margin-top:48px;margin-bottom:4rem}.handbook-foldable .handbook-title{margin-bottom:1rem}.handbook-foldable .handbook-video,.handbook-foldable .handbook-image{margin-top:3rem;margin-bottom:3rem}.handbook-foldable.-open .header{background-color:#25163b;color:#e67699}.handbook-foldable .url-item{margin:0;padding:1rem}.handbook-foldable .url-item .svg-icon{flex-shrink:0;align-self:flex-start}.handbook-foldable .url-item .link:hover{color:#e67699}.handbook-foldable .url-item .link{font-family:"EuclidCircularB-Bold-WebS";font-size:20px;font-weight:700;line-height:30px;color:#25163b;margin:0}.handbook-foldable .url-item + :not(.url-item):not(.download-item),.handbook-foldable .download-item + :not(.url-item):not(.download-item){margin-top:1.5rem}.handbook-foldable .text-item{margin-left:1.5rem;margin-right:1.5rem}.handbook-foldable .download-item{cursor:pointer;margin:0;padding:1rem}.handbook-foldable .download-item:hover{color:#e67699}.handbook-foldable .download-item:hover .title{color:#e67699}.handbook-foldable .download-item .svg-icon{flex-shrink:0;align-self:flex-start}.handbook-foldable .download-item .head{margin-bottom:0}.handbook-foldable .download-item .line{display:none}.handbook-foldable .download-item .title{font-family:"EuclidCircularB-Bold-WebS";font-size:20px;font-weight:700;line-height:30px;color:#25163b}.handbook-foldable .download-item .hint{display:none}.handbook-foldable .audio-player-element.element-layout{padding:0;margin:0;max-width:100%;margin-top:3rem;margin-bottom:3rem}.handbook-foldable .audio-player-element > .title{display:none}.handbook-foldable .audio-player-element .audio-item{align-items:flex-start;border-top:0;border-bottom:0}.handbook-foldable .audio-player-element .audio-item .range._hidden{display:block !important}.handbook-foldable .audio-player-element .audio-item .progressbar-container{align-self:flex-start;margin-top:14px}.handbook-foldable .audio-player-element .audio-item .progressbar{width:128px;margin-left:8px}.handbook-foldable .audio-player-element .audio-item .progresstext{font-family:"EuclidCircularB-Regular-WebS";font-size:13px;font-weight:400;line-height:18px;color:#25163b;margin:7px 1rem 0}.handbook-foldable .audio-player-element .audio-item:hover .title{color:#e67699}.handbook-foldable .audio-player-element .audio-item.-playing .title{color:#e67699}.handbook-foldable .audio-player-element .audio-item.-playing .progressbar input{background-color:#e67699}.handbook-foldable .audio-player-element .audio-item .title{font-family:"EuclidCircularB-Bold-WebS";font-size:20px;font-weight:700;line-height:30px;color:#25163b}.handbook-foldable .audio-player-element .audio-item + .audio-item{margin-top:.5rem}.handbook-foldable .url-item + .url-item,.handbook-foldable .url-item + .download-item,.handbook-foldable .download-item + .url-item,.handbook-foldable .download-item + .download-item,.handbook-foldable .url-item:has(+ .url-item),.handbook-foldable .url-item:has(+ .download-item),.handbook-foldable .download-item:has(+ .url-item),.handbook-foldable .download-item:has(+ .download-item),.handbook-foldable .audio-player-element .audio-item + .audio-item,.handbook-foldable .audio-player-element .audio-item:has(+ .audio-item){border-bottom:1px dashed #25163b}.handbook-foldable .handbook-title + .handbook-video,.handbook-foldable .handbook-title + .handbook-image,.handbook-foldable .handbook-title + .audio-player-element.element-layout,.handbook-foldable .content > div > :first-child.element-layout,.handbook-foldable .content > div > :first-child{margin-top:0}.handbook-header{position:fixed;width:100%;z-index:30;padding:16px 64px;background-color:#f4f3f5;border-bottom:3px solid #9b7bb6}.handbook-header .back{flex:none;margin-right:.5rem}.handbook-header .breadcrumb{font-family:"EuclidCircularB-Regular-WebS";font-size:15px;font-weight:400;line-height:22px;color:#25163b}.handbook-header .breadcrumb .quarter{font-family:"EuclidCircularB-Bold-WebS";font-size:15px;font-weight:700;line-height:22px;color:#25163b}@media all and (max-width:79.9375rem){.handbook-header{padding-left:2rem;padding-right:2rem}}@media all and (max-width:40rem){.handbook-header{padding-left:1.5rem;padding-right:1.5rem}}.handbook-image{margin-bottom:1.5rem}.handbook-image .caption{font-family:"EuclidCircularB-Regular-WebS";font-size:15px;font-weight:400;line-height:22px}.handbook-image.-resized{top:0;bottom:0;left:0;right:0;height:100vh;position:fixed;z-index:50;background-color:rgba(0,0,0,0.5)}.handbook-image.-resized .caption{display:none}.handbook-image .container{position:relative}.handbook-image .container .image{margin-bottom:16px;border-radius:16px;z-index:10;aspect-ratio:1.414/1}.handbook-image .container .image.-resized{position:fixed;top:150px;left:50px;right:50px;width:calc(100vw - 100px);padding:0;aspect-ratio:unset}.handbook-image .container .circle{width:32px;height:32px;border-radius:32px;cursor:pointer;background-color:rgba(0,0,0,0.4);position:absolute;bottom:16px;right:16px;display:flex;box-sizing:border-box;padding:4px;justify-content:center;align-items:center;gap:4px;aspect-ratio:1/1}.handbook-image .container .circle .svg-icon{width:24px;height:24px}.handbook-image .container .icon.-close{cursor:pointer;color:#fff;z-index:20;position:fixed;top:165px;right:65px;bottom:auto}.handbook-intro{margin-top:2rem;margin-bottom:3rem;color:#25163b}.handbook-intro .label{font-family:"EuclidCircularB-Semibold-WebS";font-size:15px;font-weight:600;line-height:22px;letter-spacing:-.3px;font-size:16px;line-height:24px;color:#25163b}.handbook-intro .left-side{width:50%;margin-right:2rem}.handbook-intro .left-side > * + *:not(:empty){margin-top:1.5rem}.handbook-intro .right-side{width:50%}.handbook-intro .right-side .handbook-video{margin-bottom:0}.handbook-intro .box{color:#25163b;padding:24px;border-radius:16px;background-color:#e9e8eb}.handbook-intro .box .right,.handbook-intro .box .goal{font-family:"EuclidCircularB-Regular-WebS";font-size:15px;font-weight:400;line-height:22px}.handbook-intro .box .left{width:140px;min-width:140px;margin-right:1rem}.handbook-intro .box .meta-row{margin-bottom:.5rem}.handbook-intro .box .entries .entry + .entry{margin-top:.5rem}.handbook-intro .box .goal-header{margin-bottom:10px}.handbook-intro .box .icon{width:16px;height:16px;margin-right:.5rem}.handbook-intro .box .icon.-large{width:24px;height:24px}.handbook-intro .box .separator{height:0;margin:16px 0;border:0;border-top:1px solid #d3d0d8}@media all and (max-width:48rem){.handbook-intro{flex-direction:column}.handbook-intro .left-side,.handbook-intro .right-side{width:100%}}.handbook-navigation{background-color:#fff;color:#25163b;width:26.6875rem;z-index:10;position:fixed;right:32px;top:107px;border-radius:16px;transition:all .3s ease-in-out;overflow-y:auto}.handbook-navigation.-open{top:83px;right:0;bottom:0;border-radius:0}.handbook-navigation.-open .navigation-button{border-bottom:1px solid #e9e8eb;border-radius:0}.handbook-navigation.-closed{width:300px}.handbook-navigation.-closed .navigation-button{padding:16px 24px}.handbook-navigation .navigation-button{border-radius:16px;padding:24px 24px 16px;background-color:#fff;cursor:pointer}.handbook-navigation .navigation-button .label{font-family:"EuclidCircularB-Semibold-WebS";font-size:15px;font-weight:600;line-height:22px;letter-spacing:-.3px;color:#25163b}.handbook-navigation .navigation{margin-bottom:4rem}.handbook-navigation .chapter-title{font-family:"kg_happy_solidregular";font-size:22px;font-weight:400;line-height:32px;letter-spacing:-.44px;margin-bottom:.5rem}.handbook-navigation .chapter-pages{font-family:"EuclidCircularB-Regular-WebS";font-size:13px;font-weight:400;line-height:18px;line-height:20px}.handbook-navigation .page-title{font-family:"EuclidCircularB-Regular-WebS";font-size:20px;font-weight:400;line-height:30px;color:#25163b;margin-bottom:.5rem}.handbook-navigation .duration,.handbook-navigation .handbook-icon .label{font-family:"EuclidCircularB-Regular-WebS";font-size:13px;font-weight:400;line-height:18px}.handbook-navigation .duration{margin-right:1rem}.handbook-navigation .navigation-item.page .svg-icon{margin-right:.5rem}.handbook-navigation .navigation-item{padding:16px 16px;border-bottom:1px solid #e9e8eb;cursor:pointer}.handbook-navigation .navigation-item .handbook-icon{background-color:#fff;padding:4px 8px;border-radius:8px;border:1px solid #d3d0d8}.handbook-navigation .navigation-item.chapter{min-height:92px}.handbook-navigation .navigation-item.chapter:hover{background-color:#e9e8eb;color:#e67699}.handbook-navigation .navigation-item.chapter.-selected{background-color:#25163b;color:#e67699}.handbook-navigation .navigation-item.chapter.-selected .svg-icon{color:#fff}.handbook-navigation .navigation-item.page.-selected,.handbook-navigation .navigation-item.page:hover{background-color:#e9e8eb}.handbook-paragraph{margin-bottom:1.5rem;font-family:"EuclidCircularB-Regular-WebS";font-size:20px;font-weight:400;line-height:30px;color:#25163b}.handbook-paragraph ol,.handbook-paragraph ul{margin-left:24px;margin-bottom:16px}.handbook-paragraph ol ol{list-style-type:lower-alpha}.handbook-paragraph b{font-weight:bold;font-family:EuclidCircularB-Bold-WebS,sans-serif}.handbook-paragraph a{text-decoration:underline}.handbook-paragraph li{margin-left:8px}.handbook-paragraph ol ol,.handbook-paragraph ul ul{margin-bottom:0}.handbook-quarter-card{background-image:url("/image/dot-background.svg");background-size:840px 394px;background-repeat:repeat;border-radius:24px;box-shadow:0 1.575px 12.597px 0 rgba(0,0,0,0.05);cursor:pointer}.handbook-quarter-card.-violet .content{background-color:#b9a3cc}.handbook-quarter-card.-green .content{background-color:#6dc290}.handbook-quarter-card.-orange .content{background-color:#ff7d4d}.handbook-quarter-card .content{padding:1.5rem;border-radius:24px;position:relative;bottom:0;left:0;transition:bottom .3s ease,left .3s ease}.handbook-quarter-card .content:hover{bottom:-12px;left:-12px}.handbook-quarter-card .overline,.handbook-quarter-card .title,.handbook-quarter-card .pages,.handbook-quarter-card .svg-icon{color:#25163b}.handbook-quarter-card .overline{font-family:"EuclidCircularB-Regular-WebS";font-size:14px;font-weight:400;line-height:20px;margin-bottom:.5rem}.handbook-quarter-card .title{font-family:"EuclidCircularB-Bold-WebS";font-size:26px;font-weight:700;line-height:36px;letter-spacing:-1px}.handbook-quarter-card .pages{font-family:"EuclidCircularB-Regular-WebS";font-size:18px;font-weight:400;line-height:26px}.handbook-quarter-card .svg-icon{margin-right:.5rem}.handbook-quarter-card .image{flex:0 1 220px;min-width:0;width:220px;height:auto;aspect-ratio:1.073170731707317;-o-object-fit:cover;object-fit:cover;border-radius:24px;margin-right:12px;z-index:25}.handbook-quarter-card .rightside{display:flex;flex:1 0 180px;flex-direction:column;justify-content:space-between;align-self:stretch}@media all and (max-width:40rem){.handbook-quarter-card .rightside{flex-basis:150px}}.handbook-title{margin:0 0 24px 0;color:#25163b}.handbook-title.-level-1{font-family:"kg_happy_solidregular";font-size:50px;font-weight:400;line-height:68px;letter-spacing:-1px}@media all and (max-width:48rem){.handbook-title.-level-1{font-family:"kg_happy_solidregular";font-size:40px;font-weight:400;line-height:52px;letter-spacing:-.8px}}@media all and (max-width:40rem){.handbook-title.-level-1{font-family:"kg_happy_solidregular";font-size:30px;font-weight:400;line-height:42px;letter-spacing:-.6px}}.handbook-title.-level-2{font-family:"kg_happy_solidregular";font-size:32px;font-weight:400;line-height:46px;letter-spacing:-.64px}@media all and (max-width:48rem){.handbook-title.-level-2{font-family:"kg_happy_solidregular";font-size:24px;font-weight:400;line-height:34px;letter-spacing:-.48px}}@media all and (max-width:40rem){.handbook-title.-level-2{font-family:"kg_happy_solidregular";font-size:22px;font-weight:400;line-height:32px;letter-spacing:0}}.handbook-title.-level-3{font-family:"kg_happy_solidregular";font-size:22px;font-weight:400;line-height:32px;letter-spacing:-.44px}@media all and (max-width:48rem){.handbook-title.-level-3{font-family:"kg_happy_solidregular";font-size:20px;font-weight:400;line-height:30px;letter-spacing:-.4px}}@media all and (max-width:40rem){.handbook-title.-level-3{font-family:"kg_happy_solidregular";font-size:20px;font-weight:400;line-height:30px;letter-spacing:-.4px}}.handbook-title.-level-4{font-family:"kg_happy_solidregular";font-size:17px;font-weight:400;line-height:25px;letter-spacing:-.34px;margin-bottom:16px}.handbook-video{margin-bottom:2rem}.handbook-video .image-responsive{margin-bottom:1rem;border-radius:16px;overflow:hidden;z-index:1}.handbook-video:has(.caption:empty) .image-responsive{margin-bottom:0}.handbook-video .caption{font-family:"EuclidCircularB-Regular-WebS";font-size:15px;font-weight:400;line-height:22px}.heart-transparent.-empty{color:#232323;transition:color 1s}.heart-transparent.-full{color:#e67699;transition:color 1s}.heart-transparent.-full.-animate{animation:animate-full 1s ease}@keyframes animate-full{0%{transform:scale(1)}50%{transform:scale(1.5)}100%{transform:scale(1)}}._hidden{display:none !important}._pointer{cursor:pointer}.hero-block{margin-bottom:4rem}.hero-block > .inner{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));-moz-column-gap:2rem;column-gap:2rem;align-items:start}.hero-block .image{display:block;width:100%;height:396px;-o-object-fit:cover;object-fit:cover;border-radius:24px}.hero-block .title{font-family:"EuclidCircularB-Bold-WebS";font-size:36px;font-weight:700;line-height:48px;margin:0 0 1.5rem}@media all and (max-width:48rem){.hero-block .title{font-family:"EuclidCircularB-Bold-WebS";font-size:30px;font-weight:700;line-height:40px}}@media all and (max-width:40rem){.hero-block .title{font-family:"EuclidCircularB-Bold-WebS";font-size:28px;font-weight:700;line-height:38px}}.hero-block .text{margin-bottom:1.5rem}.hero-block .text p{font-family:"EuclidCircularB-Regular-WebS";font-size:26px;font-weight:400;line-height:36px;margin:0 0 1rem}@media all and (max-width:48rem){.hero-block .text p{font-family:"EuclidCircularB-Regular-WebS";font-size:24px;font-weight:400;line-height:34px}}@media all and (max-width:40rem){.hero-block .text p{font-family:"EuclidCircularB-Regular-WebS";font-size:24px;font-weight:400;line-height:34px}}.hero-block .text p:last-child{margin-bottom:0}.hero-block .text a{color:#e67699}.hero-block .actions{display:flex;flex-direction:column;align-items:flex-start;gap:1rem}@media all and (max-width:47.9375rem){.hero-block > .inner{grid-template-columns:minmax(0,1fr);row-gap:2rem}.hero-block .figure{width:100%;max-width:540px}}.html-component .text-style.-h3{margin-top:32px;margin-bottom:24px}.html-component .text-style.-h4{margin-top:24px;margin-bottom:16px}.html-component .text-style.-para{margin-top:16px;margin-bottom:16px}.html-component .text-style.-list{margin-top:16px;margin-bottom:16px}@media all and (max-width:48rem){.html-component .text-style.-h3{margin-bottom:16px}.html-component .text-style.-h4{margin-top:16px}}@media all and (max-width:40rem){.html-component .text-style.-h3{margin-top:24px}}.ie11-error{background:url("/image/mb-background.svg") no-repeat center center fixed;background-repeat:no-repeat;background-position:center;background-size:cover;position:relative;min-height:100vh}.ie11-error .container{background-color:#fff;width:90%;margin:64px auto;padding:16px}.ie11-error .container .title{font-family:"kg_happy_solidregular";font-size:22px;font-weight:400;line-height:32px;letter-spacing:-.44px;text-align:center;margin-bottom:1.5rem}@media all and (max-width:48rem){.ie11-error .container .title{font-family:"kg_happy_solidregular";font-size:20px;font-weight:400;line-height:30px;letter-spacing:-.4px}}@media all and (max-width:40rem){.ie11-error .container .title{font-family:"kg_happy_solidregular";font-size:20px;font-weight:400;line-height:30px;letter-spacing:-.4px}}.ie11-error .container .text{font-family:"EuclidCircularB-Regular-WebS";font-size:20px;font-weight:400;line-height:30px;text-align:center}@media all and (max-width:48rem){.ie11-error .container .text{font-family:"EuclidCircularB-Regular-WebS";font-size:18px;font-weight:400;line-height:26px}}@media all and (max-width:40rem){.ie11-error .container .text{font-family:"EuclidCircularB-Regular-WebS";font-size:18px;font-weight:400;line-height:26px}}.library-navigation{display:flex;gap:1rem}.library-navigation > [view='show']{display:contents}.library-navigation .tab.button.-selected{background-color:#fff;border-color:#fff;color:#25163b}.library-navigation .tab .favorite{width:24px;height:24px;color:#e67699;margin-right:.75rem}.library-preview{position:relative;z-index:5;padding-top:80px;background-image:url("/image/notes.svg");background-repeat:no-repeat;background-position:50% 11px;background-size:142px 193px}.library-preview > .title,.library-preview > .description,.library-preview .button{position:relative;z-index:5}.library-preview .cta{margin-bottom:4rem}.library-preview > .title{font-family:"kg_happy_solidregular";font-size:50px;font-weight:400;line-height:68px;letter-spacing:-1px;color:#fff;text-align:center;margin-bottom:1.5rem}@media all and (max-width:48rem){.library-preview > .title{font-family:"kg_happy_solidregular";font-size:40px;font-weight:400;line-height:52px;letter-spacing:-.8px}}@media all and (max-width:40rem){.library-preview > .title{font-family:"kg_happy_solidregular";font-size:30px;font-weight:400;line-height:42px;letter-spacing:-.6px}}.library-preview > .description{font-family:"EuclidCircularB-Regular-WebS";font-size:26px;font-weight:400;line-height:36px;color:#fff;text-align:center;margin-bottom:2rem}@media all and (max-width:48rem){.library-preview > .description{font-family:"EuclidCircularB-Regular-WebS";font-size:24px;font-weight:400;line-height:34px}}@media all and (max-width:40rem){.library-preview > .description{font-family:"EuclidCircularB-Regular-WebS";font-size:24px;font-weight:400;line-height:34px}}@media all and (max-width:48rem){.library-preview{background-size:154px 114px}}@media all and (max-width:40rem){.library-preview{background-size:121px 90px}}.element-layout.library-preview{margin-bottom:8rem}@media all and (max-width:48rem){.element-layout.library-preview{margin-bottom:6rem}}.license-element{position:relative;z-index:10;background-color:#d8d8d8;overflow-x:clip;padding-bottom:8rem}.license-element .svg-icon.guitar{position:absolute;left:40%;top:40px;transform:translate(-50%,0%);width:323px;height:301px;z-index:-1;animation:wiggle-rotate 5s infinite}.license-element .button{width:300px}.license-element .buttons{margin-bottom:2rem}.license-element .title{font-family:"kg_happy_solidregular";font-size:50px;font-weight:400;line-height:68px;letter-spacing:-1px;color:#232323;text-align:center;padding-top:8rem;margin-bottom:2rem}@media all and (max-width:48rem){.license-element .title{font-family:"kg_happy_solidregular";font-size:40px;font-weight:400;line-height:52px;letter-spacing:-.8px}}@media all and (max-width:40rem){.license-element .title{font-family:"kg_happy_solidregular";font-size:30px;font-weight:400;line-height:42px;letter-spacing:-.6px}}.license-element .description{font-family:"EuclidCircularB-Regular-WebS";font-size:26px;font-weight:400;line-height:36px;color:#232323;text-align:center;margin-bottom:2rem}@media all and (max-width:48rem){.license-element .description{font-family:"EuclidCircularB-Regular-WebS";font-size:24px;font-weight:400;line-height:34px}}@media all and (max-width:40rem){.license-element .description{font-family:"EuclidCircularB-Regular-WebS";font-size:24px;font-weight:400;line-height:34px}}.license-element .button-image{text-align:center;padding:1rem}@keyframes wiggle-rotate{0%{transform:rotate(0deg)}50%{transform:rotate(5deg)}100%{transform:rotate(0deg)}}@media (max-width:48rem){.license-element{padding-bottom:6rem}.license-element .title{padding-top:6rem}.license-element .svg-icon.guitar{left:30%}}@media (max-width:40rem){.license-element .svg-icon.guitar{width:261px;height:240px}}.list-style.-pipe-separated > :not(:first-child)::before{content:'|'}.logout-box{background-color:#f7c809;padding-top:2rem;padding-bottom:4rem}.logout-box .lead{margin-bottom:2rem}.mobile-navigation-toggle{display:none}@media all and (max-width:48rem){.mobile-navigation-toggle{cursor:pointer;display:block;position:fixed;bottom:20px;width:64px;height:64px;right:25px;z-index:25}.mobile-navigation-toggle .navi{width:64px;height:64px}.mobile-navigation-toggle.-open{right:40%;transform:translate(50%,0%);transition:.3s right linear}.mobile-navigation-toggle.-open .navi.-open{display:none}.mobile-navigation-toggle.-close{transition:.2s right linear}.mobile-navigation-toggle.-close .navi.-close{display:none}.mobile-navigation-toggle.-close .navi.-open{display:block}}@media all and (max-width:40rem){.mobile-navigation-toggle.-open{right:50%}}.modal-element{display:none;position:fixed;top:0;left:0;width:100%;min-height:100vh;height:100vh;z-index:50;overflow-y:scroll}.modal-element.-open{display:block}.modal-element >.close{position:absolute;right:16px;top:16px}.modal-element >.close .svg-icon{width:30px;height:30px;cursor:pointer}.modal-element >.close .svg-icon.-close-hover{display:none}.modal-element >.close:hover .svg-icon.-close-hover{display:block}.modal-element >.close:hover .svg-icon.-close{display:none}.modal-element .page-tutorial.-general{padding-bottom:24px;min-height:100vh}.modal-element .page-tutorial.-general .footer-component,.modal-element .page-tutorial.-general .sub-header.-scroll{display:none}.modal-element .page-tutorial.-general .heart-transparent.-empty{color:#31b2c0}.modal-overlay{display:grid;place-items:center;position:fixed;top:0;left:0;right:0;bottom:0;background-color:rgba(34,34,34,0.75);padding:1rem;max-width:100vw;z-index:100}.modal-overlay.-small >.content{width:500px}.modal-overlay >.content{display:grid;gap:1.75rem;grid-template-rows:max-content 1fr max-content;background-color:#fff;border-radius:3px;padding:1rem;justify-content:center;position:relative}.modal-overlay >.content >.close{cursor:pointer;position:absolute;right:24px;top:24px;width:32px;height:32px}.modal-overlay >.content .title{font-family:"kg_happy_solidregular";font-size:32px;font-weight:400;line-height:46px;letter-spacing:-.64px;color:#232323;margin-bottom:1rem}@media all and (max-width:48rem){.modal-overlay >.content .title{font-family:"kg_happy_solidregular";font-size:24px;font-weight:400;line-height:34px;letter-spacing:-.48px}}@media all and (max-width:40rem){.modal-overlay >.content .title{font-family:"kg_happy_solidregular";font-size:22px;font-weight:400;line-height:32px;letter-spacing:0}}.modal-overlay >.content .text{font-family:"EuclidCircularB-Regular-WebS";font-size:20px;font-weight:400;line-height:30px;color:#232323}@media all and (max-width:48rem){.modal-overlay >.content .text{font-family:"EuclidCircularB-Regular-WebS";font-size:18px;font-weight:400;line-height:26px}}@media all and (max-width:40rem){.modal-overlay >.content .text{font-family:"EuclidCircularB-Regular-WebS";font-size:18px;font-weight:400;line-height:26px}}.modal-overlay >.content .text a{color:#e67699}.modal-overlay >.content .actions{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem}@media (max-width:48rem){.modal-overlay.-small >.content{width:100%}}.music-book-container > .title{font-family:"kg_happy_solidregular";font-size:32px;font-weight:400;line-height:46px;letter-spacing:-.64px;color:#fff;margin-bottom:1.5rem}@media all and (max-width:48rem){.music-book-container > .title{font-family:"kg_happy_solidregular";font-size:24px;font-weight:400;line-height:34px;letter-spacing:-.48px}}@media all and (max-width:40rem){.music-book-container > .title{font-family:"kg_happy_solidregular";font-size:22px;font-weight:400;line-height:32px;letter-spacing:0}}@media all and (max-width:79.9375rem){.music-book-container > .title{margin-bottom:2rem}}.music-book-container .items{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2rem}.music-book-item .card{display:block;color:inherit;text-decoration:none}.music-book-item .cover{width:100%;max-width:264px;aspect-ratio:264/356;border-radius:24px;overflow:hidden;background-image:url("/image/dot-background.svg");background-size:840px 394px;background-repeat:repeat;margin-bottom:1rem;transition:transform .3s ease}.music-book-item .cover .image{display:block;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.music-book-item .title{font-family:"kg_happy_solidregular";font-size:22px;font-weight:400;line-height:32px;letter-spacing:-.44px;color:#fff;margin:0 0 1rem}@media all and (max-width:48rem){.music-book-item .title{font-family:"kg_happy_solidregular";font-size:20px;font-weight:400;line-height:30px;letter-spacing:-.4px}}@media all and (max-width:40rem){.music-book-item .title{font-family:"kg_happy_solidregular";font-size:20px;font-weight:400;line-height:30px;letter-spacing:-.4px}}.music-book-item.-unpublished .card{pointer-events:none}.music-book-item.-unpublished .cover,.music-book-item.-unpublished .button{opacity:.5}@media all and (max-width:79.9375rem){.music-book-container .items{grid-template-columns:repeat(2,minmax(0,264px))}}@media all and (max-width:40rem){.music-book-container .items{grid-template-columns:minmax(0,1fr)}}.news-banner{position:fixed;bottom:0;left:0;right:0;width:100%;background-color:#f7c809;z-index:10}.news-banner .close{position:absolute;top:2rem;right:2rem;cursor:pointer;padding:.25rem}.news-banner .logo .svg-icon{width:109px;height:93px;margin-right:2rem}.news-banner .title{font-family:"kg_happy_solidregular";font-size:22px;font-weight:400;line-height:32px;letter-spacing:-.44px;color:#232323;margin-bottom:1rem}.news-banner .text{font-family:"EuclidCircularB-Regular-WebS";font-size:20px;font-weight:400;line-height:30px;color:#232323}.news-banner .button > .button{font-family:"EuclidCircularB-Bold-WebS";font-size:16px;font-weight:700;line-height:20px;letter-spacing:.5px;height:44px}.news-banner .content{padding:2rem 4rem}.news-banner .item.button{margin-left:2rem;margin-right:2rem}@media (max-width:79.9375rem){.news-banner .content{padding-left:2rem;padding-right:2rem}}@media (max-width:48rem){.news-banner .content{margin:0;padding:2rem 3.5rem 2rem 1.5rem}.news-banner .close{top:2rem;right:1.5rem}.news-banner .flex-layout{display:block}.news-banner .logo{display:none}.news-banner .item.button{margin-left:0;margin-right:0}.news-banner .button > .button{display:inline-flex;margin-top:2rem;height:auto;min-height:44px;line-height:16px;padding:12px 1rem;white-space:normal;text-align:center}}.page-handbook-overview .books{margin-bottom:11.125rem}@media all and (max-width:48rem){.page-handbook-overview .books{margin-bottom:4.625rem}}.page-handbook-overview .handbook-card{margin-bottom:.75rem;cursor:pointer}.page-handbook-overview .handbook-card.-customer .background .svg-icon.lock{display:none}.page-handbook-overview .handbook-card.-guest .background .image{filter:brightness(.7)}.page-handbook-overview .handbook-card .background{background-image:url("/image/dot-background.svg");background-size:840px 394px;background-repeat:repeat;border-radius:24px;width:264px;height:356px;position:relative}.page-handbook-overview .handbook-card .background .image{width:264px;height:356px;-o-object-fit:cover;object-fit:cover;border-radius:24px;margin-bottom:16px;position:relative;bottom:0;left:0;transition:bottom .3s ease,left .3s ease}.page-handbook-overview .handbook-card .background .svg-icon.lock{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:64px;height:64px;fill:#fff;transition:transform .3s ease}.page-handbook-overview .handbook-card .background:hover .image{bottom:-12px;left:-12px}.page-handbook-overview .handbook-card .background:hover .svg-icon.lock{transform:translate(calc(-50% - 12px),calc(-50% + 12px))}.container-page .page-handbook-overview .element-layout > .title{font-family:"kg_happy_solidregular";font-size:50px;font-weight:400;line-height:68px;letter-spacing:-1px;margin-top:6rem;margin-bottom:3rem}@media all and (max-width:48rem){.container-page .page-handbook-overview .element-layout > .title{font-family:"kg_happy_solidregular";font-size:40px;font-weight:400;line-height:52px;letter-spacing:-.8px}}@media all and (max-width:40rem){.container-page .page-handbook-overview .element-layout > .title{font-family:"kg_happy_solidregular";font-size:30px;font-weight:400;line-height:42px;letter-spacing:-.6px}}.container-page .page-handbook-overview .element-layout > .lead{font-family:"EuclidCircularB-Regular-WebS";font-size:26px;font-weight:400;line-height:36px;margin-bottom:3rem}@media all and (max-width:48rem){.container-page .page-handbook-overview .element-layout > .lead{font-family:"EuclidCircularB-Regular-WebS";font-size:24px;font-weight:400;line-height:34px}}@media all and (max-width:40rem){.container-page .page-handbook-overview .element-layout > .lead{font-family:"EuclidCircularB-Regular-WebS";font-size:24px;font-weight:400;line-height:34px}}.container-page .page-handbook-overview .element-layout > .sub-title{font-family:"kg_happy_solidregular";font-size:32px;font-weight:400;line-height:46px;letter-spacing:-.64px;margin-top:4rem;margin-bottom:3rem}.container-page .page-handbook-overview .element-layout > .sub-title:empty{display:none}@media all and (min-width:40rem) and (max-width:48rem){.container-page .page-handbook-overview .grid-layout > .handbook-card.item{flex:0 0 18.5rem;max-width:18.5rem}}.container-page .page-handbook-overview .handbook-card > a{display:block;max-width:264px}@media all and (max-width:40rem){.container-page .page-handbook-overview .handbook-card > a{margin:0 auto}}.container-page .page-handbook-overview .handbook-card .background{margin-bottom:1.5rem}@media all and (max-width:79.9375rem){.container-page .page-handbook-overview .handbook-card .background{max-width:100%}.container-page .page-handbook-overview .handbook-card .background .image{max-width:100%}}.container-page .page-handbook-overview .handbook-card .title{font-family:"kg_happy_solidregular";font-size:22px;font-weight:400;line-height:32px;letter-spacing:-.44px;margin-bottom:.5rem}@media all and (max-width:48rem){.container-page .page-handbook-overview .handbook-card .title{font-family:"kg_happy_solidregular";font-size:20px;font-weight:400;line-height:30px;letter-spacing:-.4px}}@media all and (max-width:40rem){.container-page .page-handbook-overview .handbook-card .title{font-family:"kg_happy_solidregular";font-size:20px;font-weight:400;line-height:30px;letter-spacing:-.4px}}.container-page .page-handbook-overview .handbook-card .description{font-family:"EuclidCircularB-Regular-WebS";font-size:15px;font-weight:400;line-height:22px}@media all and (max-width:48rem){.container-page .page-handbook-overview .handbook-card .description{font-family:"EuclidCircularB-Regular-WebS";font-size:14px;font-weight:400;line-height:20px}}@media all and (max-width:40rem){.container-page .page-handbook-overview .handbook-card .description{font-family:"EuclidCircularB-Regular-WebS";font-size:14px;font-weight:400;line-height:20px}}.container-page .page-handbook-overview .handbook-card.-guest .title,.container-page .page-handbook-overview .handbook-card.-guest .description{color:rgba(255,255,255,0.5)}.container-page .page-handbook-overview .handbook-card.-unpublished{cursor:default}.container-page .page-handbook-overview .handbook-card.-unpublished a{pointer-events:none}.container-page .page-handbook-overview .handbook-card.-unpublished .background .image{filter:none}.container-page .page-handbook-overview .handbook-card.-unpublished .background .svg-icon.lock{display:none}.container-page .page-handbook-overview .handbook-card.-unpublished .title,.container-page .page-handbook-overview .handbook-card.-unpublished .description{color:rgba(255,255,255,0.4)}.page-handbook-quarter,.page-handbook-page{background-color:#f4f3f5}.page-handbook-quarter .page-end,.page-handbook-page .page-end{margin-top:8rem}.page-handbook-quarter .element-layout.-handbook > div > .handbook-video,.page-handbook-page .element-layout.-handbook > div > .handbook-video{margin-top:3rem;margin-bottom:3rem}.page-handbook-quarter .element-layout.-handbook > div > .handbook-video:first-child,.page-handbook-page .element-layout.-handbook > div > .handbook-video:first-child,.page-handbook-quarter .element-layout.-handbook > div > .handbook-title + .handbook-video,.page-handbook-page .element-layout.-handbook > div > .handbook-title + .handbook-video{margin-top:0}.page-handbook-quarter .element-layout.-handbook > div > .handbook-paragraph + .handbook-foldable,.page-handbook-page .element-layout.-handbook > div > .handbook-paragraph + .handbook-foldable,.page-handbook-quarter .element-layout.-handbook > div > .handbook-video + .handbook-foldable,.page-handbook-page .element-layout.-handbook > div > .handbook-video + .handbook-foldable{margin-top:4rem}.page-handbook-quarter .handbook-placeholder,.page-handbook-page .handbook-placeholder{width:0;transition:width .3s ease}.page-handbook-quarter .handbook-placeholder.-open,.page-handbook-page .handbook-placeholder.-open{width:26.6875rem}.page-handbook-quarter .chapter-heading{font-family:"kg_happy_solidregular";font-size:50px;font-weight:400;line-height:68px;letter-spacing:-1px;color:#25163b;margin-bottom:1.5rem}@media all and (max-width:48rem){.page-handbook-quarter .chapter-heading{font-family:"kg_happy_solidregular";font-size:40px;font-weight:400;line-height:52px;letter-spacing:-.8px}}@media all and (max-width:40rem){.page-handbook-quarter .chapter-heading{font-family:"kg_happy_solidregular";font-size:30px;font-weight:400;line-height:42px;letter-spacing:-.6px}}@media all and (max-width:48rem){.page-handbook-quarter .page-end,.page-handbook-page .page-end{margin-top:6rem}}.container-page .page-handbook .back{margin-top:4rem;margin-bottom:4rem}.container-page .page-handbook .top .title{font-family:"kg_happy_solidregular";font-size:50px;font-weight:400;line-height:68px;letter-spacing:-1px;margin-bottom:2rem}@media all and (max-width:48rem){.container-page .page-handbook .top .title{font-family:"kg_happy_solidregular";font-size:40px;font-weight:400;line-height:52px;letter-spacing:-.8px}}@media all and (max-width:40rem){.container-page .page-handbook .top .title{font-family:"kg_happy_solidregular";font-size:30px;font-weight:400;line-height:42px;letter-spacing:-.6px}}.container-page .page-handbook .top .lead{font-family:"EuclidCircularB-Regular-WebS";font-size:26px;font-weight:400;line-height:36px;margin-bottom:2rem}@media all and (max-width:48rem){.container-page .page-handbook .top .lead{font-family:"EuclidCircularB-Regular-WebS";font-size:24px;font-weight:400;line-height:34px}}@media all and (max-width:40rem){.container-page .page-handbook .top .lead{font-family:"EuclidCircularB-Regular-WebS";font-size:24px;font-weight:400;line-height:34px}}.container-page .page-handbook .top .image{flex:0 0 auto;padding:0;width:362px;max-width:100%;height:auto;aspect-ratio:.7084148727984344;-o-object-fit:cover;object-fit:cover;border-radius:32px}.container-page .page-handbook .top{margin-left:0;margin-right:0;margin-top:0;margin-bottom:6rem}.container-page .page-handbook .quarters{row-gap:.75rem;margin-bottom:11.875rem;margin-left:-1rem;margin-right:-1rem}.container-page .page-handbook .quarters > .item{padding-left:1rem;padding-right:1rem}@media all and (max-width:48rem){.container-page .page-handbook .quarters{margin-bottom:5.375rem}.container-page .page-handbook .quarters > .item{flex-basis:100%;width:100%;max-width:100%}}.container-page .page-handbook .top > .item:last-child{flex:1 1 0;max-width:none;padding:0 0 0 6rem}@media all and (max-width:48rem){.container-page .page-handbook .top > .item:last-child{padding-left:3rem}}@media all and (max-width:40rem){.container-page .page-handbook .top .image{width:100%;max-width:362px}.container-page .page-handbook .top > .item:last-child{flex:0 0 100%;padding:2rem 0 0}}.page-library .element{position:relative;z-index:6}.container-page .page-library .sub-header .title{font-family:"kg_happy_solidregular";font-size:50px;font-weight:400;line-height:68px;letter-spacing:-1px;margin-bottom:4rem}.container-page .page-library .library-navigation{margin-bottom:1.5rem}.container-page .page-library .tutorials-tab .tutorial-title,.container-page .page-library .favorites-tab .tutorial-title,.container-page .page-library .tutorials-tab .tutorial-title p,.container-page .page-library .favorites-tab .tutorial-title p{font-family:"EuclidCircularB-Bold-WebS";font-size:20px;font-weight:700;line-height:30px;color:#e1e1e1}.container-page .page-library .description,.container-page .page-library .description p,.container-page .page-library .description li{font-family:"EuclidCircularB-Regular-WebS";font-size:26px;font-weight:400;line-height:36px;color:#fff}.container-page .page-library .songs-tab .description,.container-page .page-library .favorites-tab .description{margin-bottom:4rem}.container-page .page-library .tutorials-tab .description{margin-bottom:1.5rem}.container-page .page-library .songs-tab .grid-layout{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));-moz-column-gap:2rem;column-gap:2rem;row-gap:3rem;margin:0}.container-page .page-library .songs-tab .grid-layout > .item{width:auto;max-width:none;margin:0;padding:0}.container-page .page-library .songs-tab .grid-layout > .item:empty{display:none}@media all and (max-width:75.9375rem){.container-page .page-library .songs-tab .grid-layout{grid-template-columns:repeat(2,21rem)}}@media all and (max-width:47.9375rem){.container-page .page-library .songs-tab .grid-layout{grid-template-columns:minmax(0,20.4375rem);justify-content:center}}.container-page .page-library .tutorials-tab .grid-layout{row-gap:1.75rem}.container-page .page-library .sub-header{margin-top:8rem}.container-page .page-library > .songs{margin-bottom:8rem}.container-page .page-library .tutorials-tab .element{margin-bottom:4rem}.container-page .page-library .selected-tags{margin-top:1.5rem}.container-page .page-library .selected-tag{display:inline-block;margin-right:1rem}.container-page .page-library .tutorials-tab .grid-layout,.container-page .page-library .favorites-tab .grid-layout{margin-bottom:1.5rem}.container-page .page-library .tutorials-tab .preview,.container-page .page-library .favorites-tab .preview{margin-bottom:.5rem}@media all and (max-width:48rem){.container-page .page-library > .songs{margin-bottom:6rem}.container-page .page-library .sub-header{margin-top:6rem}.container-page .page-library .sub-header .title{font-family:"kg_happy_solidregular";font-size:40px;font-weight:400;line-height:52px;letter-spacing:-.8px;margin-bottom:3rem}.container-page .page-library .description,.container-page .page-library .description p,.container-page .page-library .description li{font-family:"EuclidCircularB-Regular-WebS";font-size:24px;font-weight:400;line-height:34px}.container-page .page-library .songs-tab .description,.container-page .page-library .favorites-tab .description{margin-bottom:3rem}.container-page .page-library .songs-tab .grid-layout{row-gap:2rem}.container-page .page-library .tutorials-tab .element{margin-bottom:3rem}.container-page .page-library .tutorials-tab .grid-layout{row-gap:.75rem}.container-page .page-library .tutorials-tab .tutorial-title,.container-page .page-library .favorites-tab .tutorial-title,.container-page .page-library .tutorials-tab .tutorial-title p,.container-page .page-library .favorites-tab .tutorial-title p{font-family:"EuclidCircularB-Bold-WebS";font-size:18px;font-weight:700;line-height:26px}}@media all and (max-width:40rem){.container-page .page-library .sub-header{margin-top:4rem}.container-page .page-library .sub-header .title{font-family:"EuclidCircularB-Bold-WebS";font-size:36px;font-weight:700;line-height:46px;letter-spacing:0;margin-bottom:2rem}.container-page .page-library .library-navigation{flex-direction:column;align-items:flex-start;row-gap:1rem}.container-page .page-library .library-navigation .tab{font-family:"EuclidCircularB-Semibold-WebS";font-size:16px;font-weight:600;line-height:16px;letter-spacing:.5px;height:32px;padding:0 .75rem;border-width:1.5px}.container-page .page-library .library-navigation .tab:hover,.container-page .page-library .library-navigation .tab:active,.container-page .page-library .library-navigation .tab.-selected{border-width:2px}.container-page .page-library .library-navigation .tab .favorite{width:16px;height:16px;margin-right:.5rem}.container-page .page-library .songs-tab .description,.container-page .page-library .favorites-tab .description{margin-bottom:2rem}.container-page .page-library .tutorials-tab .element{margin-bottom:2rem}}.page-profile{position:absolute;top:0;left:0;min-height:100vh;width:100%;background-color:#fff}.page-profile .close{cursor:pointer;position:fixed;right:32px;top:32px;width:32px;height:32px}.page-profile > .element-layout{margin-top:4rem;margin-bottom:4rem}.page-profile .label.-loose,.page-profile .value.-spaced{margin-bottom:1rem}.page-profile .code-row{flex-wrap:wrap;gap:1rem;margin-bottom:1.5rem}.page-profile .navigation{padding-right:3rem}.page-profile .navigation .navi{font-family:"kg_happy_solidregular";font-size:22px;font-weight:400;line-height:32px;letter-spacing:-.44px;color:#e67699;border-bottom:2px solid #000;padding-bottom:.5rem}@media all and (max-width:48rem){.page-profile .navigation .navi{font-family:"kg_happy_solidregular";font-size:20px;font-weight:400;line-height:30px;letter-spacing:-.4px}}@media all and (max-width:40rem){.page-profile .navigation .navi{font-family:"kg_happy_solidregular";font-size:20px;font-weight:400;line-height:30px;letter-spacing:-.4px}}.page-profile .section-title{font-family:"kg_happy_solidregular";font-size:32px;font-weight:400;line-height:46px;letter-spacing:-.64px;color:#232323;margin-bottom:2rem}@media all and (max-width:48rem){.page-profile .section-title{font-family:"kg_happy_solidregular";font-size:24px;font-weight:400;line-height:34px;letter-spacing:-.48px}}@media all and (max-width:40rem){.page-profile .section-title{font-family:"kg_happy_solidregular";font-size:22px;font-weight:400;line-height:32px;letter-spacing:0}}.page-profile .label{font-family:"kg_happy_solidregular";font-size:17px;font-weight:400;line-height:25px;letter-spacing:-.34px;color:#232323;margin-bottom:.5rem}@media all and (max-width:48rem){.page-profile .label{font-family:"kg_happy_solidregular";font-size:15px;font-weight:400;line-height:23px;letter-spacing:-.3px}}@media all and (max-width:40rem){.page-profile .label{font-family:"kg_happy_solidregular";font-size:15px;font-weight:400;line-height:23px;letter-spacing:-.3px}}.page-profile .value{font-family:"EuclidCircularB-Regular-WebS";font-size:20px;font-weight:400;line-height:30px;color:#232323}@media all and (max-width:48rem){.page-profile .value{font-family:"EuclidCircularB-Regular-WebS";font-size:18px;font-weight:400;line-height:26px}}@media all and (max-width:40rem){.page-profile .value{font-family:"EuclidCircularB-Regular-WebS";font-size:18px;font-weight:400;line-height:26px}}.page-profile .code{font-family:"EuclidCircularB-Regular-WebS";font-size:15px;font-weight:400;line-height:22px;border:3px solid #4f4f4f;border-radius:2px;padding:.5rem}@media all and (max-width:48rem){.page-profile .code{font-family:"EuclidCircularB-Regular-WebS";font-size:14px;font-weight:400;line-height:20px}}@media all and (max-width:40rem){.page-profile .code{font-family:"EuclidCircularB-Regular-WebS";font-size:14px;font-weight:400;line-height:20px}}.page-shop .shop-header{position:sticky;top:0;width:100%;z-index:30;background-color:#232323;box-shadow:inset 0 -3px 0 0 #3d3d3d}.page-shop .shop-header .logo{width:95px;height:44px}.page-shop .title{font-family:"kg_happy_solidregular";font-size:50px;font-weight:400;line-height:68px;letter-spacing:-1px}@media all and (max-width:48rem){.page-shop .title{font-family:"kg_happy_solidregular";font-size:40px;font-weight:400;line-height:52px;letter-spacing:-.8px}}@media all and (max-width:40rem){.page-shop .title{font-family:"kg_happy_solidregular";font-size:30px;font-weight:400;line-height:42px;letter-spacing:-.6px}}.page-shop .title.-center{text-align:center}.page-shop .title.-dark{color:#232323}.page-shop .subtitle{font-family:"kg_happy_solidregular";font-size:32px;font-weight:400;line-height:46px;letter-spacing:-.64px;margin-bottom:2rem}@media all and (max-width:48rem){.page-shop .subtitle{font-family:"kg_happy_solidregular";font-size:24px;font-weight:400;line-height:34px;letter-spacing:-.48px}}@media all and (max-width:40rem){.page-shop .subtitle{font-family:"kg_happy_solidregular";font-size:22px;font-weight:400;line-height:32px;letter-spacing:0}}.page-shop .lead{font-family:"EuclidCircularB-Regular-WebS";font-size:26px;font-weight:400;line-height:36px}@media all and (max-width:48rem){.page-shop .lead{font-family:"EuclidCircularB-Regular-WebS";font-size:24px;font-weight:400;line-height:34px}}@media all and (max-width:40rem){.page-shop .lead{font-family:"EuclidCircularB-Regular-WebS";font-size:24px;font-weight:400;line-height:34px}}.page-shop .label{font-family:"EuclidCircularB-Bold-WebS";font-size:15px;font-weight:700;line-height:22px;color:#232323;margin-bottom:.5rem}@media all and (max-width:48rem){.page-shop .label{font-family:"EuclidCircularB-Bold-WebS";font-size:14px;font-weight:700;line-height:20px}}@media all and (max-width:40rem){.page-shop .label{font-family:"EuclidCircularB-Bold-WebS";font-size:14px;font-weight:700;line-height:20px}}.page-shop .error p,.page-shop .input{font-family:"EuclidCircularB-Regular-WebS";font-size:20px;font-weight:400;line-height:30px}@media all and (max-width:48rem){.page-shop .error p,.page-shop .input{font-family:"EuclidCircularB-Regular-WebS";font-size:18px;font-weight:400;line-height:26px}}@media all and (max-width:40rem){.page-shop .error p,.page-shop .input{font-family:"EuclidCircularB-Regular-WebS";font-size:18px;font-weight:400;line-height:26px}}.page-shop .shop-header .bar{padding:1rem 0 1rem .5rem}.page-shop .shop-header .logo{margin-left:1rem}.page-shop .title.-center{margin-top:4rem;margin-bottom:4rem}.page-shop .title.-dark,.page-shop .color-container .title,.page-shop .purchase{margin-bottom:4rem}.page-shop .license-status{margin-bottom:3rem}.page-shop .license-status .lead{margin-bottom:1rem}.page-shop .input{margin-bottom:1.5rem}.page-shop .color-container{background-color:#31b2c0;padding-top:3rem;padding-bottom:3rem;margin-bottom:4rem}.container-page .main-content.page-single.-layout-musikheft > .title{text-align:left;margin-top:6rem;margin-bottom:4rem}.container-page .main-content.page-single.-layout-musikheft > .lead{text-align:left}.container-page .main-content.page-single.-layout-musikheft .sp-element .element-layout{max-width:none;padding:0}.container-page .main-content.page-single.-layout-musikheft .hero-block > .inner{max-width:none;padding:0 0 8rem}.container-page .main-content.page-single.-layout-musikheft .elements{max-width:80rem;padding-left:4rem;padding-right:4rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));-moz-column-gap:2rem;column-gap:2rem;align-items:start;margin:0 auto;padding-top:0;padding-bottom:6rem}@media all and (max-width:79.9375rem){.container-page .main-content.page-single.-layout-musikheft .elements{max-width:76rem;padding-left:2rem;padding-right:2rem}}@media all and (max-width:40rem){.container-page .main-content.page-single.-layout-musikheft .elements{padding-left:1.5rem;padding-right:1.5rem}}.container-page .main-content.page-single.-layout-musikheft .elements > *{grid-column:1/-1;max-width:none;margin:0;padding:0}.container-page .main-content.page-single.-layout-musikheft .elements > .sp-foldable-container{padding-bottom:8rem}.container-page .main-content.page-single.-layout-musikheft .elements > .sp-foldable-container .items{padding-bottom:0}.container-page .main-content.page-single.-layout-musikheft .elements > .music-book-container{padding-top:6rem}.container-page .main-content.page-single.-layout-musikheft .elements > .content-block-element{grid-column:auto;padding-bottom:2rem}.container-page .main-content.page-single.-layout-musikheft .elements > .content-block-element:has(.image-responsive){padding-bottom:4rem}.container-page .main-content.page-single.-layout-musikheft .elements > .content-block-element:has(.image-responsive):nth-child(even of .content-block-element:has(.image-responsive)){transform:translateY(4rem)}.container-page .main-content.page-single.-layout-musikheft .elements > .content-block-element:has(.image-responsive) + .content-block-element:not(:has(.image-responsive)),.container-page .main-content.page-single.-layout-musikheft .elements > .content-block-element:has(.image-responsive) + .content-block-element:not(:has(.image-responsive)) + .content-block-element:not(:has(.image-responsive)){margin-top:6rem}.container-page .main-content.page-single.-layout-musikheft .content-block-element .content-block{border-top:0}.container-page .main-content.page-single.-layout-musikheft .content-block-element .content-block > .grid-layout{display:block;margin:0}.container-page .main-content.page-single.-layout-musikheft .content-block-element .content-block .head,.container-page .main-content.page-single.-layout-musikheft .content-block-element .content-block .body{max-width:none;padding:0}.container-page .main-content.page-single.-layout-musikheft .content-block-element .content-block .head{display:flex;flex-direction:column-reverse}.container-page .main-content.page-single.-layout-musikheft .content-block-element .content-block .figure{margin-bottom:2rem}.container-page .main-content.page-single.-layout-musikheft .content-block-element .content-block .figure:empty{margin:0}.container-page .main-content.page-single.-layout-musikheft .content-block-element .content-block .figure .image-responsive{display:block;width:100%;aspect-ratio:560/396;-o-object-fit:cover;object-fit:cover;border-radius:24px;margin:0}.container-page .main-content.page-single.-layout-musikheft .content-block-element .content-block .title{font-family:"kg_happy_solidregular";font-size:32px;font-weight:400;line-height:46px;letter-spacing:-.64px;margin:0 0 1.5rem}.container-page .main-content.page-single.-layout-musikheft .content-block-element .content-block .text,.container-page .main-content.page-single.-layout-musikheft .content-block-element .content-block .text p{font-family:"EuclidCircularB-Regular-WebS";font-size:20px;font-weight:400;line-height:30px}.container-page .main-content.page-single.-layout-musikheft .content-block-element .content-block .text{margin:0}.container-page .main-content.page-single.-layout-musikheft .content-block-element:not(:has(.image-responsive)) .content-block .title{font-family:"kg_happy_solidregular";font-size:22px;font-weight:400;line-height:32px;letter-spacing:-.44px;margin-bottom:1rem}@media all and (max-width:79.9375rem){.container-page .main-content.page-single.-layout-musikheft > .title,.container-page .main-content.page-single.-layout-musikheft > .lead,.container-page .main-content.page-single.-layout-musikheft .elements{padding-left:2rem;padding-right:2rem}.container-page .main-content.page-single.-layout-musikheft > .title{margin-bottom:3rem}.container-page .main-content.page-single.-layout-musikheft .hero-block > .inner{padding-bottom:4rem}.container-page .main-content.page-single.-layout-musikheft .elements > .sp-foldable-container{padding-bottom:6rem}}@media all and (max-width:47.9375rem){.container-page .main-content.page-single.-layout-musikheft .elements{grid-template-columns:minmax(0,1fr)}.container-page .main-content.page-single.-layout-musikheft .elements > .content-block-element:has(.image-responsive){padding-bottom:2rem}.container-page .main-content.page-single.-layout-musikheft .elements > .content-block-element:has(.image-responsive):nth-child(even of .content-block-element:has(.image-responsive)){transform:none}.container-page .main-content.page-single.-layout-musikheft .elements > .content-block-element:has(.image-responsive) + .content-block-element:not(:has(.image-responsive)){margin-top:2rem}.container-page .main-content.page-single.-layout-musikheft .elements > .content-block-element:has(.image-responsive) + .content-block-element:not(:has(.image-responsive)) + .content-block-element:not(:has(.image-responsive)){margin-top:0}.container-page .main-content.page-single.-layout-musikheft .elements > .hero-block > .inner{padding-bottom:4rem}.container-page .main-content.page-single.-layout-musikheft .elements > .sp-foldable-container{padding-bottom:4rem}.container-page .main-content.page-single.-layout-musikheft .elements > .music-book-container{padding-top:2rem}}@media all and (max-width:40rem){.container-page .main-content.page-single.-layout-musikheft .elements{padding-bottom:4rem}.container-page .main-content.page-single.-layout-musikheft > .title{margin-top:4rem;margin-bottom:2rem}.container-page .main-content.page-single.-layout-musikheft .content-block-element .content-block .figure{margin-bottom:1rem}.container-page .main-content.page-single.-layout-musikheft .content-block-element .content-block .title{font-family:"kg_happy_solidregular";font-size:22px;font-weight:400;line-height:32px;letter-spacing:0;margin-bottom:1rem}.container-page .main-content.page-single.-layout-musikheft .content-block-element .content-block .text,.container-page .main-content.page-single.-layout-musikheft .content-block-element .content-block .text p{font-family:"EuclidCircularB-Regular-WebS";font-size:18px;font-weight:400;line-height:26px}.container-page .main-content.page-single.-layout-musikheft .content-block-element:not(:has(.image-responsive)) .content-block .title{font-family:"kg_happy_solidregular";font-size:20px;font-weight:400;line-height:30px;letter-spacing:-.4px}}.container-page .page-single > .title{font-family:"kg_happy_solidregular";font-size:50px;font-weight:400;line-height:68px;letter-spacing:-1px;color:#25163b;text-align:center;margin-top:8rem;margin-bottom:2rem}@media all and (max-width:48rem){.container-page .page-single > .title{font-family:"kg_happy_solidregular";font-size:40px;font-weight:400;line-height:52px;letter-spacing:-.8px}}@media all and (max-width:40rem){.container-page .page-single > .title{font-family:"kg_happy_solidregular";font-size:30px;font-weight:400;line-height:42px;letter-spacing:-.6px}}.container-page .page-single > .lead:empty{display:none}.container-page .page-single > .lead{font-family:"EuclidCircularB-Regular-WebS";font-size:26px;font-weight:400;line-height:36px;color:#665c76;text-align:center;margin-bottom:4rem}@media all and (max-width:48rem){.container-page .page-single > .lead{font-family:"EuclidCircularB-Regular-WebS";font-size:24px;font-weight:400;line-height:34px}}@media all and (max-width:40rem){.container-page .page-single > .lead{font-family:"EuclidCircularB-Regular-WebS";font-size:24px;font-weight:400;line-height:34px}}.container-page .page-single .content-block-element .content-block > .grid-layout{margin-top:2rem;margin-bottom:4rem}.container-page .page-single .content-block-element .content-block .title{font-family:"kg_happy_solidregular";font-size:32px;font-weight:400;line-height:46px;letter-spacing:-.64px;color:#25163b;margin-bottom:4rem}@media all and (max-width:48rem){.container-page .page-single .content-block-element .content-block .title{font-family:"kg_happy_solidregular";font-size:24px;font-weight:400;line-height:34px;letter-spacing:-.48px}}@media all and (max-width:40rem){.container-page .page-single .content-block-element .content-block .title{font-family:"kg_happy_solidregular";font-size:22px;font-weight:400;line-height:32px;letter-spacing:0}}.container-page .page-single .content-block-element .content-block .title.-h2{font-family:"kg_happy_solidregular";font-size:22px;font-weight:400;line-height:32px;letter-spacing:-.44px}@media all and (max-width:48rem){.container-page .page-single .content-block-element .content-block .title.-h2{font-family:"kg_happy_solidregular";font-size:20px;font-weight:400;line-height:30px;letter-spacing:-.4px}}@media all and (max-width:40rem){.container-page .page-single .content-block-element .content-block .title.-h2{font-family:"kg_happy_solidregular";font-size:20px;font-weight:400;line-height:30px;letter-spacing:-.4px}}.container-page .page-single .content-block-element .content-block .text{margin-bottom:2rem}.container-page .page-single .content-block-element .content-block .text,.container-page .page-single .content-block-element .content-block .text p,.container-page .page-single .content-block-element .content-block .text li{font-family:"EuclidCircularB-Regular-WebS";font-size:20px;font-weight:400;line-height:30px;color:#25163b}@media all and (max-width:48rem){.container-page .page-single .content-block-element .content-block .text,.container-page .page-single .content-block-element .content-block .text p,.container-page .page-single .content-block-element .content-block .text li{font-family:"EuclidCircularB-Regular-WebS";font-size:18px;font-weight:400;line-height:26px}}@media all and (max-width:40rem){.container-page .page-single .content-block-element .content-block .text,.container-page .page-single .content-block-element .content-block .text p,.container-page .page-single .content-block-element .content-block .text li{font-family:"EuclidCircularB-Regular-WebS";font-size:18px;font-weight:400;line-height:26px}}.container-page .page-single .content-block-element .content-block .text h3{font-family:"kg_happy_solidregular";font-size:22px;font-weight:400;line-height:32px;letter-spacing:-.44px;color:#25163b}@media all and (max-width:48rem){.container-page .page-single .content-block-element .content-block .text h3{font-family:"kg_happy_solidregular";font-size:20px;font-weight:400;line-height:30px;letter-spacing:-.4px}}@media all and (max-width:40rem){.container-page .page-single .content-block-element .content-block .text h3{font-family:"kg_happy_solidregular";font-size:20px;font-weight:400;line-height:30px;letter-spacing:-.4px}}.container-page .page-single .content-block-element .content-block .text h4{font-family:"kg_happy_solidregular";font-size:17px;font-weight:400;line-height:25px;letter-spacing:-.34px;color:#25163b}@media all and (max-width:48rem){.container-page .page-single .content-block-element .content-block .text h4{font-family:"kg_happy_solidregular";font-size:15px;font-weight:400;line-height:23px;letter-spacing:-.3px}}@media all and (max-width:40rem){.container-page .page-single .content-block-element .content-block .text h4{font-family:"kg_happy_solidregular";font-size:15px;font-weight:400;line-height:23px;letter-spacing:-.3px}}.container-page .page-single .content-block-element .content-block .text a{text-decoration:underline}.container-page .page-single .content-block-element .content-block .text b,.container-page .page-single .content-block-element .content-block .text strong{font-family:"EuclidCircularB-Bold-WebS";font-size:20px;font-weight:700;line-height:30px}@media all and (max-width:48rem){.container-page .page-single .content-block-element .content-block .text b,.container-page .page-single .content-block-element .content-block .text strong{font-family:"EuclidCircularB-Bold-WebS";font-size:18px;font-weight:700;line-height:26px}}@media all and (max-width:40rem){.container-page .page-single .content-block-element .content-block .text b,.container-page .page-single .content-block-element .content-block .text strong{font-family:"EuclidCircularB-Bold-WebS";font-size:18px;font-weight:700;line-height:26px}}.container-page .page-single .content-block-element .content-block .text i,.container-page .page-single .content-block-element .content-block .text em{font-style:italic}.container-page .page-single .sp-title{margin-bottom:2rem}.container-page .page-single .sp-title.-h1{margin-bottom:4rem}.container-page .page-single .sp-title.-h3{margin-bottom:1.5rem}.container-page .page-single .sp-title .text{font-family:"kg_happy_solidregular";font-size:32px;font-weight:400;line-height:46px;letter-spacing:-.64px;color:#25163b}@media all and (max-width:48rem){.container-page .page-single .sp-title .text{font-family:"kg_happy_solidregular";font-size:24px;font-weight:400;line-height:34px;letter-spacing:-.48px}}@media all and (max-width:40rem){.container-page .page-single .sp-title .text{font-family:"kg_happy_solidregular";font-size:22px;font-weight:400;line-height:32px;letter-spacing:0}}.container-page .page-single .sp-title.-h3 .text{font-family:"kg_happy_solidregular";font-size:22px;font-weight:400;line-height:32px;letter-spacing:-.44px}@media all and (max-width:48rem){.container-page .page-single .sp-title.-h3 .text{font-family:"kg_happy_solidregular";font-size:20px;font-weight:400;line-height:30px;letter-spacing:-.4px}}@media all and (max-width:40rem){.container-page .page-single .sp-title.-h3 .text{font-family:"kg_happy_solidregular";font-size:20px;font-weight:400;line-height:30px;letter-spacing:-.4px}}.container-page .page-single .sp-title.-center .text{text-align:center}.container-page .page-single .sp-title.-right .text{text-align:right}.container-page .page-single .sp-paragraph{margin-bottom:2rem}.container-page .page-single .sp-paragraph .text{font-family:"EuclidCircularB-Regular-WebS";font-size:20px;font-weight:400;line-height:30px;color:#25163b}@media all and (max-width:48rem){.container-page .page-single .sp-paragraph .text{font-family:"EuclidCircularB-Regular-WebS";font-size:18px;font-weight:400;line-height:26px}}@media all and (max-width:40rem){.container-page .page-single .sp-paragraph .text{font-family:"EuclidCircularB-Regular-WebS";font-size:18px;font-weight:400;line-height:26px}}.container-page .page-single .sp-paragraph.-p-big .text{color:#665c76}.container-page .page-single .sp-paragraph.-center .text{text-align:center}.container-page .page-single .sp-paragraph.-right .text{text-align:right}.container-page .page-single .sp-image,.container-page .page-single .sp-video{margin-bottom:4rem}.container-page .page-single .sp-image .image,.container-page .page-single .sp-video .image,.container-page .page-single .sp-image .video,.container-page .page-single .sp-video .video{margin-bottom:1rem}.container-page .page-single .sp-image .caption,.container-page .page-single .sp-video .caption{font-family:"EuclidCircularB-Regular-WebS";font-size:15px;font-weight:400;line-height:22px;color:#25163b}@media all and (max-width:48rem){.container-page .page-single .sp-image .caption,.container-page .page-single .sp-video .caption{font-family:"EuclidCircularB-Regular-WebS";font-size:14px;font-weight:400;line-height:20px}}@media all and (max-width:40rem){.container-page .page-single .sp-image .caption,.container-page .page-single .sp-video .caption{font-family:"EuclidCircularB-Regular-WebS";font-size:14px;font-weight:400;line-height:20px}}.container-page .page-single .sp-line{margin-bottom:4rem}.container-page .page-single .sp-link{margin-bottom:2rem}.container-page .page-single .sp-link .button{max-width:100%;height:auto;min-height:48px;padding:12px 1rem;white-space:normal;text-align:center}.container-page .page-single .sp-link .link{font-family:"EuclidCircularB-Regular-WebS";font-size:20px;font-weight:400;line-height:30px;color:#25163b}@media all and (max-width:48rem){.container-page .page-single .sp-link .link{font-family:"EuclidCircularB-Regular-WebS";font-size:18px;font-weight:400;line-height:26px}}@media all and (max-width:40rem){.container-page .page-single .sp-link .link{font-family:"EuclidCircularB-Regular-WebS";font-size:18px;font-weight:400;line-height:26px}}.container-page .page-single .sp-link .link .svg-icon{margin:.25rem 1rem 0 0}.container-page .page-single .external-script{font-family:"EuclidCircularB-Regular-WebS";font-size:20px;font-weight:400;line-height:30px;color:#25163b;margin-top:2rem;margin-bottom:2rem}@media all and (max-width:48rem){.container-page .page-single .external-script{font-family:"EuclidCircularB-Regular-WebS";font-size:18px;font-weight:400;line-height:26px}}@media all and (max-width:40rem){.container-page .page-single .external-script{font-family:"EuclidCircularB-Regular-WebS";font-size:18px;font-weight:400;line-height:26px}}.container-page .page-single .background-block .title{font-family:"kg_happy_solidregular";font-size:32px;font-weight:400;line-height:46px;letter-spacing:-.64px;color:#25163b;text-align:center;margin-top:2rem;margin-bottom:1.5rem}@media all and (max-width:48rem){.container-page .page-single .background-block .title{font-family:"kg_happy_solidregular";font-size:24px;font-weight:400;line-height:34px;letter-spacing:-.48px}}@media all and (max-width:40rem){.container-page .page-single .background-block .title{font-family:"kg_happy_solidregular";font-size:22px;font-weight:400;line-height:32px;letter-spacing:0}}.container-page .page-single .background-block .lead{font-family:"kg_happy_solidregular";font-size:22px;font-weight:400;line-height:32px;letter-spacing:-.44px;color:#25163b;margin-bottom:.5rem}@media all and (max-width:48rem){.container-page .page-single .background-block .lead{font-family:"kg_happy_solidregular";font-size:20px;font-weight:400;line-height:30px;letter-spacing:-.4px}}@media all and (max-width:40rem){.container-page .page-single .background-block .lead{font-family:"kg_happy_solidregular";font-size:20px;font-weight:400;line-height:30px;letter-spacing:-.4px}}.container-page .page-single .background-block .leaders{margin-bottom:2rem}.container-page .page-single .background-block .leader .image{margin-bottom:1rem}.container-page .page-single .background-block .leader .name{font-family:"kg_happy_solidregular";font-size:17px;font-weight:400;line-height:25px;letter-spacing:-.34px;color:#25163b;margin-bottom:1rem}@media all and (max-width:48rem){.container-page .page-single .background-block .leader .name{font-family:"kg_happy_solidregular";font-size:15px;font-weight:400;line-height:23px;letter-spacing:-.3px}}@media all and (max-width:40rem){.container-page .page-single .background-block .leader .name{font-family:"kg_happy_solidregular";font-size:15px;font-weight:400;line-height:23px;letter-spacing:-.3px}}.container-page .page-single .background-block .leader .mail{font-family:"EuclidCircularB-Bold-WebS";font-size:20px;font-weight:700;line-height:30px;color:#e67699;overflow-wrap:anywhere}@media all and (max-width:48rem){.container-page .page-single .background-block .leader .mail{font-family:"EuclidCircularB-Bold-WebS";font-size:18px;font-weight:700;line-height:26px}}@media all and (max-width:40rem){.container-page .page-single .background-block .leader .mail{font-family:"EuclidCircularB-Bold-WebS";font-size:18px;font-weight:700;line-height:26px}}.container-page .page-single .background-block .leader .text{font-family:"EuclidCircularB-Regular-WebS";font-size:20px;font-weight:400;line-height:30px;color:#25163b;margin-bottom:1rem}@media all and (max-width:48rem){.container-page .page-single .background-block .leader .text{font-family:"EuclidCircularB-Regular-WebS";font-size:18px;font-weight:400;line-height:26px}}@media all and (max-width:40rem){.container-page .page-single .background-block .leader .text{font-family:"EuclidCircularB-Regular-WebS";font-size:18px;font-weight:400;line-height:26px}}.container-page .page-single .background-block .more{margin-bottom:4rem}.container-page .page-single .background-block .more h3{font-family:"kg_happy_solidregular";font-size:22px;font-weight:400;line-height:32px;letter-spacing:-.44px;color:#25163b}@media all and (max-width:48rem){.container-page .page-single .background-block .more h3{font-family:"kg_happy_solidregular";font-size:20px;font-weight:400;line-height:30px;letter-spacing:-.4px}}@media all and (max-width:40rem){.container-page .page-single .background-block .more h3{font-family:"kg_happy_solidregular";font-size:20px;font-weight:400;line-height:30px;letter-spacing:-.4px}}.container-page .page-single .background-block .more h4{font-family:"kg_happy_solidregular";font-size:17px;font-weight:400;line-height:25px;letter-spacing:-.34px;color:#25163b}@media all and (max-width:48rem){.container-page .page-single .background-block .more h4{font-family:"kg_happy_solidregular";font-size:15px;font-weight:400;line-height:23px;letter-spacing:-.3px}}@media all and (max-width:40rem){.container-page .page-single .background-block .more h4{font-family:"kg_happy_solidregular";font-size:15px;font-weight:400;line-height:23px;letter-spacing:-.3px}}.container-page .page-single .background-block .more p,.container-page .page-single .background-block .more li{font-family:"EuclidCircularB-Regular-WebS";font-size:20px;font-weight:400;line-height:30px;color:#25163b}@media all and (max-width:48rem){.container-page .page-single .background-block .more p,.container-page .page-single .background-block .more li{font-family:"EuclidCircularB-Regular-WebS";font-size:18px;font-weight:400;line-height:26px}}@media all and (max-width:40rem){.container-page .page-single .background-block .more p,.container-page .page-single .background-block .more li{font-family:"EuclidCircularB-Regular-WebS";font-size:18px;font-weight:400;line-height:26px}}.container-page .page-single .background-block .more a{text-decoration:underline}.container-page .page-single .sponsor-block-element{margin-bottom:4rem}.container-page .page-single .sponsor-element .title{font-family:"kg_happy_solidregular";font-size:32px;font-weight:400;line-height:46px;letter-spacing:-.64px;color:#25163b;text-align:center;margin-top:1.5rem;margin-bottom:1.5rem}@media all and (max-width:48rem){.container-page .page-single .sponsor-element .title{font-family:"kg_happy_solidregular";font-size:24px;font-weight:400;line-height:34px;letter-spacing:-.48px}}@media all and (max-width:40rem){.container-page .page-single .sponsor-element .title{font-family:"kg_happy_solidregular";font-size:22px;font-weight:400;line-height:32px;letter-spacing:0}}.container-page .page-single .sponsor-element .text-element{margin-bottom:3rem}.container-page .page-single .sponsor-element .text-element h3{font-family:"EuclidCircularB-Bold-WebS";font-size:26px;font-weight:700;line-height:36px;color:#25163b}@media all and (max-width:48rem){.container-page .page-single .sponsor-element .text-element h3{font-family:"EuclidCircularB-Bold-WebS";font-size:24px;font-weight:700;line-height:34px}}@media all and (max-width:40rem){.container-page .page-single .sponsor-element .text-element h3{font-family:"EuclidCircularB-Bold-WebS";font-size:24px;font-weight:700;line-height:34px}}.container-page .page-single .sponsor-element .text-element h4{font-family:"EuclidCircularB-Bold-WebS";font-size:20px;font-weight:700;line-height:30px;color:#25163b}@media all and (max-width:48rem){.container-page .page-single .sponsor-element .text-element h4{font-family:"EuclidCircularB-Bold-WebS";font-size:18px;font-weight:700;line-height:26px}}@media all and (max-width:40rem){.container-page .page-single .sponsor-element .text-element h4{font-family:"EuclidCircularB-Bold-WebS";font-size:18px;font-weight:700;line-height:26px}}.container-page .page-single .sponsor-element .text-element p,.container-page .page-single .sponsor-element .text-element li{font-family:"EuclidCircularB-Regular-WebS";font-size:20px;font-weight:400;line-height:30px;color:#25163b}@media all and (max-width:48rem){.container-page .page-single .sponsor-element .text-element p,.container-page .page-single .sponsor-element .text-element li{font-family:"EuclidCircularB-Regular-WebS";font-size:18px;font-weight:400;line-height:26px}}@media all and (max-width:40rem){.container-page .page-single .sponsor-element .text-element p,.container-page .page-single .sponsor-element .text-element li{font-family:"EuclidCircularB-Regular-WebS";font-size:18px;font-weight:400;line-height:26px}}.container-page .page-single .sponsor-element .text-element a{text-decoration:underline}.container-page .page-single .sponsor-element .image-container .images{margin-bottom:3rem}@media all and (max-width:48rem){.container-page .page-single > .title{margin-top:6rem}}.container-page .page-single.-theme-dark > .title{color:#fff}.container-page .page-single.-theme-dark > .lead{color:#d3d0d8}.container-page .page-single.-theme-dark .sp-title .text,.container-page .page-single.-theme-dark .sp-paragraph .text,.container-page .page-single.-theme-dark .sp-paragraph.-p-big .text,.container-page .page-single.-theme-dark .sp-link .link,.container-page .page-single.-theme-dark .external-script,.container-page .page-single.-theme-dark .content-block .title,.container-page .page-single.-theme-dark .content-block .text,.container-page .page-single.-theme-dark .content-block .text p,.container-page .page-single.-theme-dark .content-block .text li,.container-page .page-single.-theme-dark .content-block .text h3,.container-page .page-single.-theme-dark .content-block .text h4{color:#fff}.container-page .page-single.-theme-dark .content-block-element .text a{color:#e67699}.page-splash{position:fixed;top:0;left:0;right:0;background-color:#232323;height:100%;min-height:100vh;opacity:1;z-index:200;width:100vw}.page-splash .video{position:relative;top:50%;left:50%;transform:translate(-50%,-50%)}.page-splash .video video{width:100%}.page-splash.-close{opacity:0;transition:opacity .8s ease-out}.page-splash.-faded{min-height:0;height:0;top:-2000px}.page-start{color:#fff;background-color:#232323}.page-start.-scrolling .site-header{position:fixed;background-color:#25163b}@media all and (max-width:40rem){.page-start .logo{width:95px;height:44px}}.page-student{color:#fff;padding-bottom:4rem}.page-student .header{margin-bottom:1.5rem}.page-student .content{margin-bottom:3rem}.page-student .content .title,.page-student .video{margin-bottom:1.5rem}.page-student .playbacks{margin-bottom:8rem}.page-student .logo{height:86px;width:154px;color:#fff;margin-left:46px;margin-top:27px}.page-student .content > .title{font-family:"kg_happy_solidregular";font-size:50px;font-weight:400;line-height:68px;letter-spacing:-1px;color:#fff;text-align:center}@media all and (max-width:48rem){.page-student .content > .title{font-family:"kg_happy_solidregular";font-size:40px;font-weight:400;line-height:52px;letter-spacing:-.8px}}@media all and (max-width:40rem){.page-student .content > .title{font-family:"kg_happy_solidregular";font-size:30px;font-weight:400;line-height:42px;letter-spacing:-.6px}}@media all and (max-width:48rem){.page-student .playbacks{margin-bottom:6rem}}.page-tutorial .sub-header{margin-top:8rem}.page-tutorial .sub-header .title{margin-bottom:1rem}.page-tutorial .sub-header .scrollto-element{margin-top:2rem}.page-tutorial .sub-header.-scroll{margin-top:0}.page-tutorial .sub-header.-scroll .title{margin-bottom:0}.page-tutorial .sub-header.-scroll .scrollto-element{margin-top:0}.page-tutorial .video-header{margin-bottom:1rem}.page-tutorial .video-header.-standalone{margin-top:8rem}.page-tutorial .share-menu{padding:1.5rem}.page-tutorial .share-menu .title{margin-bottom:1rem}.page-tutorial .share-menu .copy-message{margin-bottom:1.5rem;padding:.25rem .5rem}.page-tutorial .share-menu .code{margin-bottom:2rem}.page-tutorial .share-menu .input{margin-right:1rem}.page-tutorial .share-menu .copy-link{margin-left:.25rem;margin-right:.25rem;padding:.125rem}.page-tutorial .share-menu .url{padding-right:.5rem}.page-tutorial .iframely{margin-bottom:1.5rem}.page-tutorial .tags-row{margin-bottom:2rem}.page-tutorial .tag-slot,.page-tutorial .toggle-favorite{margin-bottom:1rem}.page-tutorial .download-button{margin-bottom:2rem}.page-tutorial .video-component .html-component{margin-bottom:4rem}.page-tutorial .curriculum-title,.page-tutorial .curriculum-item{margin-bottom:1rem}.page-tutorial .curriculum-list{margin-bottom:4rem}.page-tutorial .curriculum-link .svg-icon{margin-right:1rem;margin-top:.25rem}.page-tutorial.-free-song .video-component .iframely{border:3px solid #f7c809}.page-tutorial.-intro,.page-tutorial.-default{background-color:#25163b;color:#fff}.page-tutorial.-intro .video-component,.page-tutorial.-default .video-component{width:66%}.page-tutorial.-intro .video-component .html-component .text-style.-para,.page-tutorial.-default .video-component .html-component .text-style.-para,.page-tutorial.-intro .video-component .html-component .text-style.-list,.page-tutorial.-default .video-component .html-component .text-style.-list{color:#e1e1e1}.page-tutorial.-intro .video-component .iframely,.page-tutorial.-default .video-component .iframely{aspect-ratio:16/9}.page-tutorial.-general{background-color:#31b2c0;color:#232323}.page-tutorial.-general .video-component .html-component .text-style.-para,.page-tutorial.-general .video-component .html-component .text-style.-list{color:#232323}.page-tutorial.-general .video-component .iframely{aspect-ratio:16/9}.page-tutorial.-general .share-container .share-menu{right:0;transform:translate(0%)}.page-tutorial.-general .video-component{width:100%}.page-tutorial.-general .sub-header{display:none;color:#fff;padding:8px 0}.page-tutorial.-general .sub-header.-scroll{display:block}.page-tutorial.-general .sub-header.-scroll + .element-layout{margin-top:0}.page-tutorial .video-title{font-family:"kg_happy_solidregular";font-size:50px;font-weight:400;line-height:68px;letter-spacing:-1px}@media all and (max-width:48rem){.page-tutorial .video-title{font-family:"kg_happy_solidregular";font-size:40px;font-weight:400;line-height:52px;letter-spacing:-.8px}}@media all and (max-width:40rem){.page-tutorial .video-title{font-family:"kg_happy_solidregular";font-size:30px;font-weight:400;line-height:42px;letter-spacing:-.6px}}.page-tutorial .video-title.-small{font-family:"kg_happy_solidregular";font-size:17px;font-weight:400;line-height:25px;letter-spacing:-.34px}@media all and (max-width:48rem){.page-tutorial .video-title.-small{font-family:"kg_happy_solidregular";font-size:15px;font-weight:400;line-height:23px;letter-spacing:-.3px}}@media all and (max-width:40rem){.page-tutorial .video-title.-small{font-family:"kg_happy_solidregular";font-size:15px;font-weight:400;line-height:23px;letter-spacing:-.3px}}.page-tutorial .download-title{font-family:"kg_happy_solidregular";font-size:22px;font-weight:400;line-height:32px;letter-spacing:-.44px;color:#fff;margin-top:1.5rem;margin-bottom:1.5rem}@media all and (max-width:48rem){.page-tutorial .download-title{font-family:"kg_happy_solidregular";font-size:20px;font-weight:400;line-height:30px;letter-spacing:-.4px}}@media all and (max-width:40rem){.page-tutorial .download-title{font-family:"kg_happy_solidregular";font-size:20px;font-weight:400;line-height:30px;letter-spacing:-.4px}}.page-tutorial .curriculum-title{font-family:"kg_happy_solidregular";font-size:17px;font-weight:400;line-height:25px;letter-spacing:-.34px}@media all and (max-width:48rem){.page-tutorial .curriculum-title{font-family:"kg_happy_solidregular";font-size:15px;font-weight:400;line-height:23px;letter-spacing:-.3px}}@media all and (max-width:40rem){.page-tutorial .curriculum-title{font-family:"kg_happy_solidregular";font-size:15px;font-weight:400;line-height:23px;letter-spacing:-.3px}}.page-tutorial .curriculum-link{font-family:"EuclidCircularB-Regular-WebS";font-size:20px;font-weight:400;line-height:30px}@media all and (max-width:48rem){.page-tutorial .curriculum-link{font-family:"EuclidCircularB-Regular-WebS";font-size:18px;font-weight:400;line-height:26px}}@media all and (max-width:40rem){.page-tutorial .curriculum-link{font-family:"EuclidCircularB-Regular-WebS";font-size:18px;font-weight:400;line-height:26px}}.page-tutorial .curriculum-link:hover{color:#e67699}.page-tutorial .share-container{position:relative}.page-tutorial .share-container .share-menu{position:absolute;top:60px;transform:translate(-50%,0);background-color:#fff;z-index:100}.page-tutorial .share-container .share-menu .title{font-family:"kg_happy_solidregular";font-size:32px;font-weight:400;line-height:46px;letter-spacing:-.64px;color:#232323}@media all and (max-width:48rem){.page-tutorial .share-container .share-menu .title{font-family:"kg_happy_solidregular";font-size:24px;font-weight:400;line-height:34px;letter-spacing:-.48px}}@media all and (max-width:40rem){.page-tutorial .share-container .share-menu .title{font-family:"kg_happy_solidregular";font-size:22px;font-weight:400;line-height:32px;letter-spacing:0}}.page-tutorial .share-container .share-menu .close{color:#232323;cursor:pointer}.page-tutorial .share-container .share-menu .close .svg-icon.-close-hover{display:none}.page-tutorial .share-container .share-menu .close:hover .svg-icon.-close{display:none}.page-tutorial .share-container .share-menu .close:hover .svg-icon.-close-hover{display:block}.page-tutorial .share-container .share-menu .copy-message{font-family:"kg_happy_solidregular";font-size:17px;font-weight:400;line-height:25px;letter-spacing:-.34px;color:#fff;background-color:#2ea861}@media all and (max-width:48rem){.page-tutorial .share-container .share-menu .copy-message{font-family:"kg_happy_solidregular";font-size:15px;font-weight:400;line-height:23px;letter-spacing:-.3px}}@media all and (max-width:40rem){.page-tutorial .share-container .share-menu .copy-message{font-family:"kg_happy_solidregular";font-size:15px;font-weight:400;line-height:23px;letter-spacing:-.3px}}.page-tutorial .share-container .share-menu .hint{font-family:"EuclidCircularB-Regular-WebS";font-size:13px;font-weight:400;line-height:18px;color:#232323}@media all and (max-width:48rem){.page-tutorial .share-container .share-menu .hint{font-family:"EuclidCircularB-Regular-WebS";font-size:14px;font-weight:400;line-height:20px}}@media all and (max-width:40rem){.page-tutorial .share-container .share-menu .hint{font-family:"EuclidCircularB-Regular-WebS";font-size:14px;font-weight:400;line-height:20px}}.page-tutorial .share-container .share-menu .code{font-family:"EuclidCircularB-Regular-WebS";font-size:20px;font-weight:400;line-height:30px;color:#232323}@media all and (max-width:48rem){.page-tutorial .share-container .share-menu .code{font-family:"EuclidCircularB-Regular-WebS";font-size:18px;font-weight:400;line-height:26px}}@media all and (max-width:40rem){.page-tutorial .share-container .share-menu .code{font-family:"EuclidCircularB-Regular-WebS";font-size:18px;font-weight:400;line-height:26px}}.page-tutorial .share-container .share-menu .url{white-space:nowrap}.page-tutorial .share-container .share-menu .input{border-radius:2px;border:3px solid #232323;height:44px}@media all and (max-width:48rem){.page-tutorial.-intro .video-component,.page-tutorial.-default .video-component{width:100%}.page-tutorial.-general .mobile-navigation-toggle{display:none}.page-tutorial .share-container{display:none}}@media all and (max-width:48rem){.page-tutorial .sub-header{margin-top:6rem}.page-tutorial .sub-header.-scroll{margin-top:0}.page-tutorial .video-header.-standalone{margin-top:6rem}}.paywall-overlay{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;padding:1.5rem;overflow-y:auto;background-color:rgba(35,35,35,0.4);z-index:1000}.paywall-overlay .paywall-content{display:flex;flex-direction:column;width:700px;max-width:100%;margin:auto;padding:2rem 1.5rem;border-radius:2rem;background-color:#fff;color:#25163b}.paywall-overlay .close{display:flex;align-items:center;justify-content:center;align-self:flex-end;width:32px;height:32px;margin-bottom:.5rem;padding:0;border:1.5px solid #25163b;border-radius:50%;background:none;cursor:pointer}.paywall-overlay .close .svg-icon{width:24px;height:24px}.paywall-overlay .title{font-family:"kg_happy_solidregular";font-size:32px;font-weight:400;line-height:46px;letter-spacing:-.64px;margin-bottom:18px}@media all and (max-width:48rem){.paywall-overlay .title{font-family:"kg_happy_solidregular";font-size:24px;font-weight:400;line-height:34px;letter-spacing:-.48px}}@media all and (max-width:40rem){.paywall-overlay .title{font-family:"kg_happy_solidregular";font-size:22px;font-weight:400;line-height:32px;letter-spacing:0}}.paywall-overlay .text{font-family:"EuclidCircularB-Regular-WebS";font-size:20px;font-weight:400;line-height:30px;margin-bottom:1.5rem}@media all and (max-width:48rem){.paywall-overlay .text{font-family:"EuclidCircularB-Regular-WebS";font-size:18px;font-weight:400;line-height:26px}}@media all and (max-width:40rem){.paywall-overlay .text{font-family:"EuclidCircularB-Regular-WebS";font-size:18px;font-weight:400;line-height:26px}}.paywall-overlay .actions{display:flex;flex-wrap:wrap;gap:1rem}@media all and (max-width:40rem){.paywall-overlay .actions{flex-direction:column}.paywall-overlay .actions > .button{width:100%}}.pricing-dropdown{border:2px solid #232323;margin-bottom:8rem}.pricing-dropdown .header .toggle{margin-right:1rem}.pricing-dropdown .container li{margin-bottom:1rem}.pricing-dropdown .header{cursor:pointer}.pricing-dropdown .header .label{font-family:"kg_happy_solidregular";font-size:22px;font-weight:400;line-height:32px;letter-spacing:-.44px;color:#25163b;padding:1rem}@media all and (max-width:48rem){.pricing-dropdown .header .label{font-family:"kg_happy_solidregular";font-size:20px;font-weight:400;line-height:30px;letter-spacing:-.4px}}@media all and (max-width:40rem){.pricing-dropdown .header .label{font-family:"kg_happy_solidregular";font-size:20px;font-weight:400;line-height:30px;letter-spacing:-.4px}}.pricing-dropdown .container{display:none;font-family:"EuclidCircularB-Regular-WebS";font-size:20px;font-weight:400;line-height:30px;color:#fff}@media all and (max-width:48rem){.pricing-dropdown .container{font-family:"EuclidCircularB-Regular-WebS";font-size:18px;font-weight:400;line-height:26px}}@media all and (max-width:40rem){.pricing-dropdown .container{font-family:"EuclidCircularB-Regular-WebS";font-size:18px;font-weight:400;line-height:26px}}.pricing-dropdown .container ol{margin-bottom:0;padding:1rem}.pricing-dropdown.-open .container{display:block;background-color:#232323}@media all and (max-width:48rem){.pricing-dropdown{margin-bottom:6rem}}.pricing-view .color-container{background-color:#31b2c0;padding-top:4rem}.pricing-view .separator{width:100%;border-top:3px solid #232323;margin-bottom:4rem}.pricing-view .title{font-family:"kg_happy_solidregular";font-size:32px;font-weight:400;line-height:46px;letter-spacing:-.64px;color:#25163b;margin-bottom:1rem}@media all and (max-width:48rem){.pricing-view .title{font-family:"kg_happy_solidregular";font-size:24px;font-weight:400;line-height:34px;letter-spacing:-.48px}}@media all and (max-width:40rem){.pricing-view .title{font-family:"kg_happy_solidregular";font-size:22px;font-weight:400;line-height:32px;letter-spacing:0}}.pricing-view .subtitle{font-family:"kg_happy_solidregular";font-size:22px;font-weight:400;line-height:32px;letter-spacing:-.44px;color:#25163b;margin-bottom:2rem}@media all and (max-width:48rem){.pricing-view .subtitle{font-family:"kg_happy_solidregular";font-size:20px;font-weight:400;line-height:30px;letter-spacing:-.4px}}@media all and (max-width:40rem){.pricing-view .subtitle{font-family:"kg_happy_solidregular";font-size:20px;font-weight:400;line-height:30px;letter-spacing:-.4px}}.pricing-view .lead,.pricing-view .offer{font-family:"EuclidCircularB-Regular-WebS";font-size:20px;font-weight:400;line-height:30px;color:#665c76}@media all and (max-width:48rem){.pricing-view .lead,.pricing-view .offer{font-family:"EuclidCircularB-Regular-WebS";font-size:18px;font-weight:400;line-height:26px}}@media all and (max-width:40rem){.pricing-view .lead,.pricing-view .offer{font-family:"EuclidCircularB-Regular-WebS";font-size:18px;font-weight:400;line-height:26px}}.pricing-view .offer a{color:#e67699}.pricing-view .lead{margin-bottom:2rem}.pricing-view .offer,.pricing-view .color-container .intro-grid,.pricing-view .color-container .title,.pricing-view .color-container .button,.pricing-view .products{margin-bottom:4rem}.pricing-view .products.-school{margin-bottom:3rem}.pricing-view .product-box .header.-single{padding:.5rem}.pricing-view .product-box .body{padding:0 1rem 1rem}.pricing-view .figure{margin-top:2rem;margin-bottom:2rem}.pricing-view .amount{margin-bottom:1rem}.pricing-view .product-box .header{font-family:"kg_happy_solidregular";font-size:22px;font-weight:400;line-height:32px;letter-spacing:-.44px;color:#fff;padding:.5rem 1rem}@media all and (max-width:48rem){.pricing-view .product-box .header{font-family:"kg_happy_solidregular";font-size:20px;font-weight:400;line-height:30px;letter-spacing:-.4px}}@media all and (max-width:40rem){.pricing-view .product-box .header{font-family:"kg_happy_solidregular";font-size:20px;font-weight:400;line-height:30px;letter-spacing:-.4px}}.pricing-view .product-box .price{font-family:"EuclidCircularB-Bold-WebS";font-size:36px;font-weight:700;line-height:48px;color:#25163b}@media all and (max-width:48rem){.pricing-view .product-box .price{font-family:"EuclidCircularB-Bold-WebS";font-size:30px;font-weight:700;line-height:40px}}@media all and (max-width:40rem){.pricing-view .product-box .price{font-family:"EuclidCircularB-Bold-WebS";font-size:28px;font-weight:700;line-height:38px}}.pricing-view .product-box .per{font-family:"kg_happy_solidregular";font-size:17px;font-weight:400;line-height:25px;letter-spacing:-.34px;color:#25163b}@media all and (max-width:48rem){.pricing-view .product-box .per{font-family:"kg_happy_solidregular";font-size:15px;font-weight:400;line-height:23px;letter-spacing:-.3px}}@media all and (max-width:40rem){.pricing-view .product-box .per{font-family:"kg_happy_solidregular";font-size:15px;font-weight:400;line-height:23px;letter-spacing:-.3px}}.pricing-view .product-box .note{font-family:"EuclidCircularB-Regular-WebS";font-size:20px;font-weight:400;line-height:30px;color:#25163b;margin-bottom:1.5rem}@media all and (max-width:48rem){.pricing-view .product-box .note{font-family:"EuclidCircularB-Regular-WebS";font-size:18px;font-weight:400;line-height:26px}}@media all and (max-width:40rem){.pricing-view .product-box .note{font-family:"EuclidCircularB-Regular-WebS";font-size:18px;font-weight:400;line-height:26px}}.product-box{background-color:#fff;box-shadow:3px 3px 16px 0 rgba(0,2,4,0.2)}.product-box.-single{background-color:#e1e1e1}.product-box .header{background-color:#000}.product-box .image{width:192px;height:120px}.product-container{background-color:#fff;color:#25163b;padding:8rem 0}.product-container .head{position:relative;z-index:0;margin-bottom:4rem}.product-container .head::before{content:'';position:absolute;z-index:-1;top:50%;left:50%;width:351px;height:216px;background:url("/image/star-yellow.svg") no-repeat center/contain;transform:translate(calc(-50% + 64px),-50%)}.product-container .head .title{font-family:"kg_happy_solidregular";font-size:50px;font-weight:400;line-height:68px;letter-spacing:-1px;text-align:center}@media all and (max-width:48rem){.product-container .head .title{font-family:"kg_happy_solidregular";font-size:40px;font-weight:400;line-height:52px;letter-spacing:-.8px}}@media all and (max-width:40rem){.product-container .head .title{font-family:"kg_happy_solidregular";font-size:30px;font-weight:400;line-height:42px;letter-spacing:-.6px}}.product-container .text{font-family:"EuclidCircularB-Regular-WebS";font-size:26px;font-weight:400;line-height:36px;text-align:center;margin-bottom:4rem}@media all and (max-width:48rem){.product-container .text{font-family:"EuclidCircularB-Regular-WebS";font-size:24px;font-weight:400;line-height:34px}}@media all and (max-width:40rem){.product-container .text{font-family:"EuclidCircularB-Regular-WebS";font-size:24px;font-weight:400;line-height:34px}}.product-container .text p{margin:0;font:inherit;color:inherit}.product-container .items{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4rem}.product-container .items:has(> :nth-child(3)){grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem}.product-container .items:has(> :nth-child(3)) .product-item .figure{max-width:none;aspect-ratio:363/356}.product-container.-theme-dark{background-color:#25163b;color:#fff}.product-container.-theme-dark .head{margin-bottom:1.5rem}.product-container.-theme-dark .head::before{width:327px;height:150px;background-image:url("/image/guitar-purple.png");transform:translate(calc(-50% + 18px),calc(-50% - 9px))}.product-item .figure{display:block;width:100%;max-width:530px;aspect-ratio:530/356;border-radius:24px;overflow:hidden;background-color:#f4f3f5}.product-item .figure .image{display:block;width:100%;height:100%;-o-object-fit:contain;object-fit:contain}.product-item .figure.-link{overflow:visible;background-color:transparent;background-image:url("/image/dot-background.svg");background-size:840px 394px;background-repeat:repeat}.product-item .figure.-link .panel{display:block;position:relative;bottom:0;left:0;height:100%;border-radius:24px;overflow:hidden;background-color:#f4f3f5;transition:bottom .3s ease,left .3s ease}.product-item .figure.-link:hover .panel{bottom:-15px;left:-15px}.product-item .title{font-family:"kg_happy_solidregular";font-size:22px;font-weight:400;line-height:32px;letter-spacing:-.44px;margin:0}@media all and (max-width:48rem){.product-item .title{font-family:"kg_happy_solidregular";font-size:20px;font-weight:400;line-height:30px;letter-spacing:-.4px}}@media all and (max-width:40rem){.product-item .title{font-family:"kg_happy_solidregular";font-size:20px;font-weight:400;line-height:30px;letter-spacing:-.4px}}.product-item:has(.figure) .title{margin-top:1.5rem}.product-item .price{font-family:"EuclidCircularB-Bold-WebS";font-size:15px;font-weight:700;line-height:22px;margin:.5rem 0 0;text-decoration:underline;text-decoration-color:#f7c809;text-decoration-thickness:60%;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none;text-underline-offset:-.4em}@media all and (max-width:48rem){.product-item .price{font-family:"EuclidCircularB-Bold-WebS";font-size:14px;font-weight:700;line-height:20px}}@media all and (max-width:40rem){.product-item .price{font-family:"EuclidCircularB-Bold-WebS";font-size:14px;font-weight:700;line-height:20px}}.product-item .description{font-family:"EuclidCircularB-Regular-WebS";font-size:15px;font-weight:400;line-height:22px;margin:.5rem 0 0}@media all and (max-width:48rem){.product-item .description{font-family:"EuclidCircularB-Regular-WebS";font-size:14px;font-weight:400;line-height:20px}}@media all and (max-width:40rem){.product-item .description{font-family:"EuclidCircularB-Regular-WebS";font-size:14px;font-weight:400;line-height:20px}}.product-item .actions{margin-top:1rem}@media all and (max-width:48rem){.product-container{padding:6rem 0}.product-container .head::before{transform:translate(-50%,-50%)}.product-container.-theme-dark .head::before{transform:translate(-50%,-50%)}.product-container .items,.product-container .items:has(> :nth-child(3)){grid-template-columns:minmax(0,1fr)}.product-container .items:has(> :nth-child(3)){gap:4rem}.product-container .items:has(> :nth-child(3)) .product-item .figure{max-width:530px}}@media all and (max-width:40rem){.product-container .head::before{width:265px;height:163px}.product-container.-theme-dark .head::before{width:255px;height:117px}.product-item .figure{max-width:none}}.profile-menu{position:relative}.profile-menu .content{border-radius:1px;box-shadow:3px 3px 16px 0 rgba(0,0,0,0.2);position:absolute;top:26px;right:0;width:400px;background-color:#fff;color:#232323;padding:1rem}.profile-menu .content .profile{width:103px;height:103px;margin-right:1rem}.profile-menu .content .name{font-family:"EuclidCircularB-Bold-WebS";font-size:20px;font-weight:700;line-height:30px}.profile-menu .content .user{font-family:"EuclidCircularB-Regular-WebS";font-size:15px;font-weight:400;line-height:22px;line-height:24px}.profile-menu .content .link{font-family:"EuclidCircularB-Medium-WebS";font-size:20px;font-weight:500;line-height:30px;color:#232323}.profile-menu .content .separator{width:100%;height:3px;margin:1rem 0;background-color:#e1e1e1}.profile-menu .content .entry:not(:last-child){margin-bottom:1rem}.profile-menu .content .entry .svg-icon{margin-right:1rem}@media all and (max-width:48rem){.profile-menu .content .name{font-family:"EuclidCircularB-Bold-WebS";font-size:18px;font-weight:700;line-height:26px}.profile-menu .content .link{font-family:"EuclidCircularB-Medium-WebS";font-size:18px;font-weight:500;line-height:26px}}.progress-ring{width:32px;height:32px;border-radius:50%;border:3px solid rgba(230,118,153,0.2);border-left-color:#e67699;background:transparent;animation:rotate 1s linear infinite}@keyframes rotate{from{transform:rotate(0)}to{transform:rotate(360deg)}}.related-content{background-color:#31b2c0}.related-content > .element-layout{padding-bottom:8rem}.related-content > .element-layout > div > .title{font-family:"kg_happy_solidregular";font-size:32px;font-weight:400;line-height:46px;letter-spacing:-.64px;color:#232323;padding-top:4rem;padding-bottom:2rem}@media all and (max-width:48rem){.related-content > .element-layout > div > .title{font-family:"kg_happy_solidregular";font-size:24px;font-weight:400;line-height:34px;letter-spacing:-.48px}}@media all and (max-width:40rem){.related-content > .element-layout > div > .title{font-family:"kg_happy_solidregular";font-size:22px;font-weight:400;line-height:32px;letter-spacing:0}}.related-content .tutorial-preview{padding-right:3rem}.related-content .poster{margin-bottom:1rem}.related-content .tutorial-title{font-family:"kg_happy_solidregular";font-size:22px;font-weight:400;line-height:32px;letter-spacing:-.44px;color:#232323;max-width:275px}@media all and (max-width:48rem){.related-content .tutorial-title{font-family:"kg_happy_solidregular";font-size:20px;font-weight:400;line-height:30px;letter-spacing:-.4px}}@media all and (max-width:40rem){.related-content .tutorial-title{font-family:"kg_happy_solidregular";font-size:20px;font-weight:400;line-height:30px;letter-spacing:-.4px}}.related-content .container{position:relative}.related-content .container .navi-left,.related-content .container .navi-right{position:absolute;color:#fff;z-index:5;top:53px;cursor:pointer}.related-content .container .navi-left .svg-icon,.related-content .container .navi-right .svg-icon{width:44px;height:44px}.related-content .container .navi-right{right:0}.related-content .container .navi-right .svg-icon{transform:rotate(180deg)}.related-content .container .outer-stage{overflow:hidden}.related-content .container .outer-stage .inner-stage{position:relative;display:flex;flex-direction:row;flex-wrap:nowrap;left:0;transition:.4s left ease-out}.related-content .container .outer-stage .inner-stage .tutorial-preview .container{width:275px}.related-content .container .outer-stage .inner-stage .tutorial-preview .container .favorite{position:absolute;top:17px;right:17px}@media all and (max-width:48rem){.related-content > .element-layout{padding-bottom:6rem}}.site-header{position:sticky;top:0;z-index:30;width:100%;background-color:#25163b;border-bottom:2px solid #665c76}.site-header.-transparent{position:absolute;background-color:transparent;border-bottom:0}.site-header.-transparent .dreiklang{background-color:rgba(255,255,255,0.4)}.site-header .inner{display:flex;align-items:center;gap:1.5rem;height:92px;max-width:125rem;margin:0 auto;padding:0 4rem}.site-header .logo{flex:none;display:flex;align-items:center;margin-right:auto}.site-header .logo .svg-icon{width:125px;height:58px}.site-header .dreiklang{display:flex;flex:none;gap:.5rem;margin-right:1.5rem;padding:.25rem;border-radius:999px;background-color:rgba(255,255,255,0.15)}.site-header .dreiklang .item{font-family:"EuclidCircularB-Semibold-WebS";font-size:20px;font-weight:600;line-height:24px;display:block;padding:.75rem 1rem;border-radius:999px;color:#fff;white-space:nowrap;transition:background-color .3s,color .3s}.site-header .dreiklang .item:hover{background-color:#e984a3}.site-header .dreiklang .item.-active{background-color:#e67699}.site-header .dreiklang .item.-disabled{color:#d3d0d8;cursor:default}.site-header .dreiklang .item.-disabled:hover{background-color:transparent}.site-header .about{font-family:"EuclidCircularB-Semibold-WebS";font-size:20px;font-weight:600;line-height:24px;flex:none;color:#fff;white-space:nowrap}.site-header .about:hover,.site-header .about.-active{color:#e67699}.site-header .shop{flex:none}.site-header .profile-slot{position:relative;flex:none}.site-header .avatar{display:block;width:48px;height:48px;border-radius:50%;cursor:pointer}.site-header .hamburger{display:none;flex:none;margin-left:auto;cursor:pointer}.site-header .hamburger .svg-icon{color:#fff}.site-header .hamburger-navigation{display:none}@media all and (max-width:1360px){.site-header .inner{padding:0 2rem}.site-header .dreiklang{margin-right:0}}@media all and (max-width:79.9375rem){.site-header.-mobile-open{background-color:#25163b;border-bottom:2px solid #665c76}.site-header.-mobile-open .hamburger-navigation .dreiklang{background-color:rgba(255,255,255,0.15)}.site-header .inner{gap:0;height:78px;padding:0 2rem}.site-header .logo .svg-icon{width:97px;height:45px}.site-header .inner > .dreiklang,.site-header .inner > .about,.site-header .inner > .shop,.site-header .inner > .login-slot,.site-header .inner > .profile-slot{display:none}.site-header .hamburger{display:block}.site-header .hamburger .svg-icon{width:48px;height:48px}.site-header .hamburger-navigation.-open{display:block;position:fixed;top:80px;right:0;bottom:0;left:0;overflow-y:auto;padding:4rem 1.5rem;background-color:#25163b}.site-header .hamburger-navigation .dreiklang{flex-direction:column;margin:0 0 2rem;border-radius:2rem}.site-header .hamburger-navigation .dreiklang .item{display:flex;align-items:center;justify-content:center;height:60px}.site-header .hamburger-navigation .links{display:flex;flex-direction:column;gap:1rem}.site-header .hamburger-navigation .links > div:not(:has(*)){display:none}.site-header .hamburger-navigation .nav{font-family:"EuclidCircularB-Semibold-WebS";font-size:20px;font-weight:600;line-height:24px;display:block;padding:1rem 0;color:#fff;text-align:center}.site-header .hamburger-navigation .nav:hover,.site-header .hamburger-navigation .nav.-active{color:#e67699}.site-header .hamburger-navigation .shop,.site-header .hamburger-navigation .login{display:flex;justify-content:center}}@media all and (max-width:40rem){.site-header .inner{height:62px;padding:0 1.5rem}.site-header .logo .svg-icon{width:71px;height:33px}.site-header .hamburger .svg-icon{width:32px;height:32px}.site-header .hamburger-navigation.-open{top:64px}}.song-navigation{margin-bottom:2rem}.song-navigation .image{width:96px;min-width:96px}.song-navigation .tutorial-list,.song-navigation .guest{margin:1rem}.song-navigation .tutorial,.song-navigation .guest .item{padding:1rem}.song-navigation .tutorial .container,.song-navigation .guest .item .container{margin-right:1rem}.song-navigation .tutorial-scroll .button{margin:1rem}.song-navigation .main-title{font-family:"kg_happy_solidregular";font-size:17px;font-weight:400;line-height:25px;letter-spacing:-.34px;margin-left:1rem;margin-right:1rem;margin-bottom:1rem}@media all and (max-width:48rem){.song-navigation .main-title{font-family:"kg_happy_solidregular";font-size:15px;font-weight:400;line-height:23px;letter-spacing:-.3px}}@media all and (max-width:40rem){.song-navigation .main-title{font-family:"kg_happy_solidregular";font-size:15px;font-weight:400;line-height:23px;letter-spacing:-.3px}}.song-navigation .tutorial .title,.song-navigation .guest .title{font-family:"EuclidCircularB-Bold-WebS";font-size:15px;font-weight:700;line-height:22px}@media all and (max-width:48rem){.song-navigation .tutorial .title,.song-navigation .guest .title{font-family:"EuclidCircularB-Bold-WebS";font-size:14px;font-weight:700;line-height:20px}}@media all and (max-width:40rem){.song-navigation .tutorial .title,.song-navigation .guest .title{font-family:"EuclidCircularB-Bold-WebS";font-size:14px;font-weight:700;line-height:20px}}.song-navigation .guest .item .lock{display:none}.song-navigation .guest .item.-selected:hover{cursor:inherit}.song-navigation .guest .item.-selected:hover .image{opacity:1}.song-navigation .guest .item.-disabled{cursor:auto}.song-navigation .guest .item.-disabled:hover{background-color:#25163b}.song-navigation .guest .item.-disabled .container{position:relative}.song-navigation .guest .item.-disabled .container .image{opacity:.7}.song-navigation .guest .item.-disabled .container .lock{display:block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.song-navigation .guest .item.-disabled .container .title{color:#d3d3d3}.song-navigation .tutorial{cursor:pointer;border-bottom:2px solid #808080}.song-navigation .tutorial:hover .container .play{display:block}.song-navigation .tutorial:hover .image{opacity:.7}.song-navigation .tutorial .container{position:relative}.song-navigation .tutorial .container .play{display:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.song-navigation .tutorial.-selected,.song-navigation .tutorial:hover{background-color:#514562}@media all and (max-width:48rem){.song-navigation{display:block;position:fixed;top:0;bottom:0;right:-40%;transition:.3s right linear;overflow-y:auto;width:40%;background-color:#25163b;box-shadow:6px 6px 21px 0 #000;z-index:20}.song-navigation .tutorial-scroll{display:none}.song-navigation .overlay{background-color:#000;height:100%;position:fixed;z-index:9;opacity:0;right:0%;top:-100vh;left:0}.song-navigation .svg-icon{width:48px;height:48px}.song-navigation .main-title{margin-top:32px;margin-bottom:16px}.song-navigation .container .tutorial .container,.song-navigation .container .guest .item .container{margin:0}.song-navigation .container >.item.flex-layout.-items-center{display:block}.song-navigation .container >.item.flex-layout.-items-center:hover .image{opacity:.7}.song-navigation .container >.item.flex-layout.-items-center .inner .svg-icon{width:24px;height:22px}.song-navigation .container >.item.flex-layout.-items-center >.container{display:block}.song-navigation .container >.item.flex-layout.-items-center >.container .image{width:100%;margin-bottom:10px}.song-navigation.-open{right:0}.song-navigation.-open .overlay{opacity:.7;top:0;right:40%;transition:.3s opacity linear,.3s right linear}}@media all and (max-width:40rem){.song-navigation{right:-50%;width:50%}.song-navigation .svg-icon{width:24px;height:24px}.song-navigation.-open .overlay{right:50%}}.sp-foldable-container{color:#25163b}.sp-foldable-container > .title{font-family:"kg_happy_solidregular";font-size:50px;font-weight:400;line-height:68px;letter-spacing:-1px;text-align:center;margin-bottom:2rem}@media all and (max-width:48rem){.sp-foldable-container > .title{font-family:"kg_happy_solidregular";font-size:40px;font-weight:400;line-height:52px;letter-spacing:-.8px}}@media all and (max-width:40rem){.sp-foldable-container > .title{font-family:"kg_happy_solidregular";font-size:30px;font-weight:400;line-height:42px;letter-spacing:-.6px}}.sp-foldable-container .items{max-width:864px;margin:0 auto;padding-bottom:6rem}.sp-foldable-item .header{display:flex;align-items:center;gap:1rem;width:100%;padding:1.5rem;border:0;border-bottom:1px solid currentColor;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}.sp-foldable-item .header:hover .question,.sp-foldable-item .header:hover .svg-icon{color:#e67699;fill:#e67699}.sp-foldable-item .header:focus-visible{outline:2px solid #e67699;outline-offset:2px}.sp-foldable-item .question{font-family:"EuclidCircularB-Bold-WebS";font-size:26px;font-weight:700;line-height:36px;flex:1 1 auto;transition:color .3s ease}@media all and (max-width:48rem){.sp-foldable-item .question{font-family:"EuclidCircularB-Bold-WebS";font-size:24px;font-weight:700;line-height:34px}}@media all and (max-width:40rem){.sp-foldable-item .question{font-family:"EuclidCircularB-Bold-WebS";font-size:24px;font-weight:700;line-height:34px}}.sp-foldable-item .svg-icon{flex-shrink:0;transition:fill .3s ease;width:24px;height:24px;fill:currentColor}.sp-foldable-item .answer{font-family:"EuclidCircularB-Regular-WebS";font-size:20px;font-weight:400;line-height:30px;padding:3rem 4rem 4rem}@media all and (max-width:48rem){.sp-foldable-item .answer{font-family:"EuclidCircularB-Regular-WebS";font-size:18px;font-weight:400;line-height:26px}}@media all and (max-width:40rem){.sp-foldable-item .answer{font-family:"EuclidCircularB-Regular-WebS";font-size:18px;font-weight:400;line-height:26px}}.sp-foldable-item .answer p{margin:0 0 1rem}.sp-foldable-item .answer p:last-child{margin-bottom:0}.sp-foldable-item .answer a{color:#e67699}.page-single.-theme-dark .sp-foldable-container{color:#fff}@media all and (max-width:40rem){.sp-foldable-item .answer{padding-left:1.5rem;padding-right:1.5rem}}.sp-line{width:100%;height:3px;background-color:#3d3d3d}.sp-paragraph a{text-decoration:underline}.sp-paragraph a:hover{color:#e67699}.sp-paragraph a::after{content:"";background-image:url("/image/icon-link.png");background-size:100% 100%;display:inline-block;height:20px;width:20px;margin-right:5px;position:relative;left:5px;top:3px}.sp-paragraph ul,.sp-paragraph ol{margin-bottom:16px}.sp-paragraph ul:not(:first-child),.sp-paragraph ol:not(:first-child){margin-top:16px}.sp-paragraph ul li,.sp-paragraph ol li{margin-top:0;margin-bottom:0}.sp-paragraph ul + p,.sp-paragraph ol + p{margin-top:16px}.sp-paragraph p + p{margin-top:32px}.sponsor-element{border-top:3px solid #232323}.startpage-cover{position:relative;color:#fff;height:100vh}.startpage-cover .overlay-container > .overlay{margin-left:80px}@media all and (max-width:79.9375rem){.startpage-cover .overlay-container > .overlay{margin-left:2rem;margin-right:2rem}}@media all and (max-width:40rem){.startpage-cover .overlay-container > .overlay{margin-left:1.5rem;margin-right:1.5rem}}.startpage-cover >.video,.startpage-cover .cover{position:absolute;top:0%;left:0%;width:100%;height:100%;overflow:hidden;opacity:1}.startpage-cover >.video video,.startpage-cover .cover video,.startpage-cover >.video img,.startpage-cover .cover img{height:100vh;width:100vw;-o-object-fit:cover;object-fit:cover}.startpage-cover >.video img,.startpage-cover .cover img{filter:brightness(70%)}.startpage-cover >.video.-fade-in,.startpage-cover .cover.-fade-in{opacity:1;transition:opacity 3s}.startpage-cover >.video.-fade-out,.startpage-cover .cover.-fade-out{opacity:0;transition:opacity 3s}.startpage-cover .overlay-container{position:relative;width:100%;height:100vh}.startpage-cover .overlay-container >.overlay{position:absolute;top:35%;transform:translate(0%,-50%)}.startpage-cover .overlay .title{font-family:"kg_happy_solidregular";font-size:50px;font-weight:400;line-height:68px;letter-spacing:-1px;color:#fff;margin-bottom:2rem}@media all and (max-width:48rem){.startpage-cover .overlay .title{font-family:"kg_happy_solidregular";font-size:40px;font-weight:400;line-height:52px;letter-spacing:-.8px}}@media all and (max-width:40rem){.startpage-cover .overlay .title{font-family:"kg_happy_solidregular";font-size:30px;font-weight:400;line-height:42px;letter-spacing:-.6px}}.startpage-cover .overlay .text{font-family:"EuclidCircularB-Regular-WebS";font-size:26px;font-weight:400;line-height:36px;color:#fff}@media all and (max-width:48rem){.startpage-cover .overlay .text{font-family:"EuclidCircularB-Regular-WebS";font-size:24px;font-weight:400;line-height:34px}}@media all and (max-width:40rem){.startpage-cover .overlay .text{font-family:"EuclidCircularB-Regular-WebS";font-size:24px;font-weight:400;line-height:34px}}.strip-component{display:block;padding:20px 0;-webkit-mask-image:url("/image/strip.svg");mask-image:url("/image/strip.svg");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 120%;mask-size:100% 120%;z-index:10;text-align:left;min-width:180px}.strip-component.-blue{background-color:#31b2c0}.strip-component.-pink{background-color:#e67699}.strip-component.-green{background-color:#2ea861}.strip-component.-yellow{background-color:#f7c809;color:#25163b}.strip-component.-small{padding:5px 0;-webkit-mask-size:cover;mask-size:cover}.sub-header{position:relative;z-index:7;background-color:#25163b}.sub-header .title{font-family:"kg_happy_solidregular";font-size:50px;font-weight:400;line-height:68px;letter-spacing:-1px}@media all and (max-width:48rem){.sub-header .title{font-family:"kg_happy_solidregular";font-size:40px;font-weight:400;line-height:52px;letter-spacing:-.8px}}@media all and (max-width:40rem){.sub-header .title{font-family:"kg_happy_solidregular";font-size:30px;font-weight:400;line-height:42px;letter-spacing:-.6px}}.sub-header .subtitle{font-family:"kg_happy_solidregular";font-size:32px;font-weight:400;line-height:46px;letter-spacing:-.64px}@media all and (max-width:48rem){.sub-header .subtitle{font-family:"kg_happy_solidregular";font-size:24px;font-weight:400;line-height:34px;letter-spacing:-.48px}}@media all and (max-width:40rem){.sub-header .subtitle{font-family:"kg_happy_solidregular";font-size:22px;font-weight:400;line-height:32px;letter-spacing:0}}.sub-header .tooltip .text{font-family:"EuclidCircularB-Regular-WebS";font-size:20px;font-weight:400;line-height:30px;color:#232323}@media all and (max-width:48rem){.sub-header .tooltip .text{font-family:"EuclidCircularB-Regular-WebS";font-size:18px;font-weight:400;line-height:26px}}@media all and (max-width:40rem){.sub-header .tooltip .text{font-family:"EuclidCircularB-Regular-WebS";font-size:18px;font-weight:400;line-height:26px}}.sub-header.-vinyl.-scroll .scrollto-element .animation{display:inline-block;width:72px;height:72px}.sub-header.-vinyl.-scroll .scrollto-element .tooltip{right:80px}.sub-header.-vinyl .scrollto-element .tooltip{right:126px}.sub-header.-vinyl .scrollto-element .animation{display:inline-block;width:126px;height:126px}.sub-header .scrollto-element{position:relative;top:-100px}.sub-header .scrollto-element:hover .tooltip{opacity:1}.sub-header .scrollto-element .button{cursor:pointer}.sub-header .scrollto-element .tooltip{background-color:#fff;box-shadow:0 2px 4px 0 #000;position:absolute;opacity:0;transition:1s opacity ease-out;margin-right:10px;white-space:nowrap;padding:.5rem}.sub-header .scrollto-element .tooltip::after{content:"";position:absolute;right:-23px;top:0;width:0;height:0;border-top:23px solid transparent;border-bottom:23px solid transparent;border-left:23px solid #fff}.sub-header .scrollto-element .tooltip.-active{opacity:1}.sub-header + .element-layout{transition:none}.sub-header.-scroll{position:fixed;top:94px;width:100%;z-index:8;border-bottom:3px solid #665c76}.sub-header.-scroll + .element-layout{margin-top:200px}.sub-header.-scroll .title{font-family:"kg_happy_solidregular";font-size:32px;font-weight:400;line-height:46px;letter-spacing:-.64px}@media all and (max-width:48rem){.sub-header.-scroll .title{font-family:"kg_happy_solidregular";font-size:24px;font-weight:400;line-height:34px;letter-spacing:-.48px}}@media all and (max-width:40rem){.sub-header.-scroll .title{font-family:"kg_happy_solidregular";font-size:22px;font-weight:400;line-height:32px;letter-spacing:0}}.sub-header.-scroll .subtitle{display:none}.sub-header.-scroll .scrollto-element{position:relative;top:0;align-self:center;padding-top:12px;padding-bottom:12px}.sub-header.-scroll .scrollto-element .button{line-height:0}@media all and (max-width:79.9375rem){.sub-header.-scroll{top:80px}}@media all and (max-width:40rem){.sub-header.-scroll{top:64px}}@media all and (max-width:48rem){.sub-header.-vinyl .tooltip{display:none}}@media all and (max-width:40rem){.sub-header.-vinyl .scrollto-element .animation{width:62px;height:62px}.sub-header.-vinyl.-scroll .animation{margin-right:10px}}.svg-icon.-small{width:16px;height:16px}.svg-icon.-round{width:48px;height:48px;border-radius:50%}.svg-icon.-round svg{position:relative;top:50%;left:50%;transform:translate(-50%,-50%);width:24px;height:24px}.svg-icon.-pink{background-color:#e67699}.svg-icon.-pink svg{color:#fff}.tag-element{margin-right:1.5rem}.tag-element .svg-icon{width:34px;height:34px;margin-right:.5rem}.tag-element .label{font-family:"EuclidCircularB-Regular-WebS";font-size:13px;font-weight:400;line-height:18px}@media all and (max-width:48rem){.tag-element .label{font-family:"EuclidCircularB-Regular-WebS";font-size:14px;font-weight:400;line-height:20px}}@media all and (max-width:40rem){.tag-element .label{font-family:"EuclidCircularB-Regular-WebS";font-size:14px;font-weight:400;line-height:20px}}@media all and (max-width:40rem){.tag-element .label{display:none}}.text-image-element{padding-top:32px;margin-bottom:8rem;background-repeat:no-repeat;background-position:-15% 110%}.text-image-element .stacked{margin-bottom:1.5rem}.text-image-element .item.-stacked{margin-bottom:2rem}.text-image-element .title{font-family:"kg_happy_solidregular";font-size:50px;font-weight:400;line-height:68px;letter-spacing:-1px;color:#fff;text-align:center;margin-bottom:1.5rem}@media all and (max-width:48rem){.text-image-element .title{font-family:"kg_happy_solidregular";font-size:40px;font-weight:400;line-height:52px;letter-spacing:-.8px}}@media all and (max-width:40rem){.text-image-element .title{font-family:"kg_happy_solidregular";font-size:30px;font-weight:400;line-height:42px;letter-spacing:-.6px}}.text-image-element .lead{font-family:"EuclidCircularB-Regular-WebS";font-size:26px;font-weight:400;line-height:36px;color:#fff;text-align:center;margin-bottom:4rem}@media all and (max-width:48rem){.text-image-element .lead{font-family:"EuclidCircularB-Regular-WebS";font-size:24px;font-weight:400;line-height:34px}}@media all and (max-width:40rem){.text-image-element .lead{font-family:"EuclidCircularB-Regular-WebS";font-size:24px;font-weight:400;line-height:34px}}.text-image-element .text{color:#e1e1e1;margin-bottom:2rem}.text-image-element.-bg-color:not(.text-image-element.-free-song-teaser ){margin-bottom:128px}.text-image-element.-bg-color:not(.text-image-element.-free-song-teaser ) >.container .title,.text-image-element.-bg-color:not(.text-image-element.-free-song-teaser ) >.container .lead,.text-image-element.-bg-color:not(.text-image-element.-free-song-teaser ) >.container .text{color:#232323}.text-image-element.-bg-color:not(.text-image-element.-free-song-teaser ) >.container .button.-outline{color:#232323}.text-image-element.-bg-color:not(.text-image-element.-free-song-teaser ) >.container .button.-outline:hover{background-color:#232323;color:#fff}.text-image-element.-free-song-teaser{margin-bottom:0}.text-image-element.-free-song-teaser >.container{padding-bottom:68px}.text-image-element.-free-song-teaser >.container .text{color:#fff}.text-image-element.-free-song-teaser >.container .button.-outline{color:#e1e1e1}.text-image-element.-free-song-teaser >.container .button.-outline:hover{background-color:#e1e1e1;color:#e67699}.text-image-element.-free-song-teaser >.container .image-responsive{border:3px solid #f7c809}.text-image-element .container{background-repeat:no-repeat;background-size:150px 162px;animation:animatedBackground 2s linear infinite alternate}@keyframes animatedBackground{from{background-position:48% -13px}to{background-position:52% -10px}}@media all and (max-width:48rem){.text-image-element{margin-bottom:6rem}.text-image-element .container{background-size:120px 130px}@keyframes animatedBackground{from{background-position:48% -3px}to{background-position:52% 10px}}}@media all and (max-width:40rem){.text-image-element{background-image:none !important}.text-image-element .container{background-size:94px 102px}}.text-image-element.-banner{background-color:#f4f3f5;padding-top:0;margin-bottom:0}.text-image-element.-banner > .container{padding-top:6rem;padding-bottom:6rem}.text-image-element.-banner > .container > .flex-layout{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));-moz-column-gap:2rem;column-gap:2rem;align-items:start;margin:0}.text-image-element.-banner > .container > .flex-layout > .item{width:auto;max-width:none;padding:0;margin:0}.text-image-element.-banner .images .image{display:block;width:100%;aspect-ratio:4/3;-o-object-fit:cover;object-fit:cover;border-radius:24px}.text-image-element.-banner .text{color:#25163b;margin-bottom:1.5rem}.text-image-element.-banner .text h1{font-family:"kg_happy_solidregular";font-size:50px;font-weight:400;line-height:68px;letter-spacing:-1px;color:#25163b;margin:0 0 1.5rem}@media all and (max-width:48rem){.text-image-element.-banner .text h1{font-family:"kg_happy_solidregular";font-size:40px;font-weight:400;line-height:52px;letter-spacing:-.8px}}@media all and (max-width:40rem){.text-image-element.-banner .text h1{font-family:"kg_happy_solidregular";font-size:30px;font-weight:400;line-height:42px;letter-spacing:-.6px}}.text-image-element.-banner .text p{font-family:"EuclidCircularB-Regular-WebS";font-size:26px;font-weight:400;line-height:36px;color:#25163b;margin:0 0 1rem}@media all and (max-width:48rem){.text-image-element.-banner .text p{font-family:"EuclidCircularB-Regular-WebS";font-size:24px;font-weight:400;line-height:34px}}@media all and (max-width:40rem){.text-image-element.-banner .text p{font-family:"EuclidCircularB-Regular-WebS";font-size:24px;font-weight:400;line-height:34px}}.text-image-element.-banner .text p:last-child{margin-bottom:0}.text-image-element.-banner .actions .button{font-family:"EuclidCircularB-Bold-WebS";font-size:16px;font-weight:700;line-height:20px;letter-spacing:.5px;height:44px}@media all and (max-width:48rem){.text-image-element.-banner{margin-bottom:0}.text-image-element.-banner > .container{padding-top:4rem;padding-bottom:4rem}.text-image-element.-banner > .container > .flex-layout{grid-template-columns:minmax(0,1fr);row-gap:2rem}.text-image-element.-banner .images .image{max-width:540px;margin:0 auto}}@media all and (max-width:40rem){.text-image-element.-banner > .container{padding:3rem 1.5rem}}.text-style ul,.text-style ol{margin-bottom:16px}.text-style.-para,.text-style.-list{font-family:"EuclidCircularB-Regular-WebS";font-size:20px;font-weight:400;line-height:30px}@media all and (max-width:48rem){.text-style.-para,.text-style.-list{font-family:"EuclidCircularB-Regular-WebS";font-size:18px;font-weight:400;line-height:26px}}@media all and (max-width:40rem){.text-style.-para,.text-style.-list{font-family:"EuclidCircularB-Regular-WebS";font-size:18px;font-weight:400;line-height:26px}}.text-style.-h1{font-family:"kg_happy_solidregular";font-size:32px;font-weight:400;line-height:46px;letter-spacing:-.64px}@media all and (max-width:48rem){.text-style.-h1{font-family:"kg_happy_solidregular";font-size:24px;font-weight:400;line-height:34px;letter-spacing:-.48px}}@media all and (max-width:40rem){.text-style.-h1{font-family:"kg_happy_solidregular";font-size:22px;font-weight:400;line-height:32px;letter-spacing:0}}.text-style.-h2,.text-style.-h3{font-family:"kg_happy_solidregular";font-size:22px;font-weight:400;line-height:32px;letter-spacing:-.44px}@media all and (max-width:48rem){.text-style.-h2,.text-style.-h3{font-family:"kg_happy_solidregular";font-size:20px;font-weight:400;line-height:30px;letter-spacing:-.4px}}@media all and (max-width:40rem){.text-style.-h2,.text-style.-h3{font-family:"kg_happy_solidregular";font-size:20px;font-weight:400;line-height:30px;letter-spacing:-.4px}}.text-style.-h4{font-family:"kg_happy_solidregular";font-size:17px;font-weight:400;line-height:25px;letter-spacing:-.34px}@media all and (max-width:48rem){.text-style.-h4{font-family:"kg_happy_solidregular";font-size:15px;font-weight:400;line-height:23px;letter-spacing:-.3px}}@media all and (max-width:40rem){.text-style.-h4{font-family:"kg_happy_solidregular";font-size:15px;font-weight:400;line-height:23px;letter-spacing:-.3px}}.container-page :is(.page-library.-theme-dark,.page-single.-theme-dark,.page-handbook.-theme-dark,.page-handbook-overview).-theme-dark{background-color:#25163b;color:#fff}.container-page :is(.page-library.-theme-light,.page-single.-theme-light,.page-handbook.-theme-light,.page-handbook-overview).-theme-light{background-color:#fff;color:#25163b}.toggle-favorite .svg-icon{cursor:pointer;float:right;margin-right:4px}.tutorial-preview .locked-video .date{font-family:"EuclidCircularB-Bold-WebS";font-size:20px;font-weight:700;line-height:30px}.tutorial-preview .free-song .label{font-family:"EuclidCircularB-Bold-WebS";font-size:26px;font-weight:700;line-height:36px;color:#232323;line-height:50px}@media all and (max-width:48rem){.tutorial-preview .free-song .label{font-size:22px}.tutorial-preview .locked-video .date{font-family:"EuclidCircularB-Bold-WebS";font-size:18px;font-weight:700;line-height:26px}}@media all and (max-width:40rem){.tutorial-preview .free-song .label{font-size:20px}}.tutorial-preview{cursor:pointer}.tutorial-preview.-free-song .image{border:3px solid #f7c809}.tutorial-preview.-free-song .free-song{display:block;position:absolute;bottom:0;background-color:#f7c809;width:100%;height:50px;text-align:center}.tutorial-preview .free-song{display:none}.tutorial-preview .container{position:relative}.tutorial-preview .container .image{filter:brightness(90%)}.tutorial-preview .container .favorite{position:absolute;top:12px;right:16px}.tutorial-preview .container .lock{display:none}.tutorial-preview .container .play-video{display:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:48px;height:48px}.tutorial-preview .container .indicator{position:absolute;bottom:16px;right:16px}.tutorial-preview.-border .image{border:6px solid #31b2c0}.tutorial-preview:hover .container .play-video{display:block}.tutorial-preview:hover .container .image{filter:brightness(70%)}.tutorial-preview.-locked:hover .container .play-video{display:none}.tutorial-preview.-locked .container .image{filter:brightness(70%)}.tutorial-preview.-locked .container .lock{width:36px;height:36px;display:block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.tutorial-preview.-coming-soon .container .image{filter:brightness(70%)}.tutorial-preview.-coming-soon .container .locked-video{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;white-space:nowrap}.tutorial-preview.-coming-soon .container .locked-video .svg-icon{margin:0 auto;width:36px;height:48px;margin-bottom:8px}.tutorial-preview .preview{max-height:210px}.tutorial-preview .strip-component{position:absolute;transform:translate(-8px,-8px)}.tutorial-preview .indicator .playlist{display:none}.tutorial-preview .strip-component .label{font-family:"EuclidCircularB-Bold-WebS";font-size:26px;font-weight:700;line-height:36px;color:#fff;padding-left:1rem;padding-right:1rem}@media all and (max-width:48rem){.tutorial-preview .strip-component .label{font-family:"EuclidCircularB-Bold-WebS";font-size:24px;font-weight:700;line-height:34px}}@media all and (max-width:40rem){.tutorial-preview .strip-component .label{font-family:"EuclidCircularB-Bold-WebS";font-size:24px;font-weight:700;line-height:34px}}.tutorial-preview .indicator .count{font-family:"EuclidCircularB-Medium-WebS",sans-serif;font-size:15px;font-weight:500;line-height:24px;margin-right:.5rem}.tutorial-preview .title{font-family:"EuclidCircularB-Bold-WebS";font-size:26px;font-weight:700;line-height:36px;color:#fff}@media all and (max-width:48rem){.tutorial-preview .title{font-family:"EuclidCircularB-Bold-WebS";font-size:24px;font-weight:700;line-height:34px}}@media all and (max-width:40rem){.tutorial-preview .title{font-family:"EuclidCircularB-Bold-WebS";font-size:24px;font-weight:700;line-height:34px}}.tutorial-preview .preview .title{margin-bottom:1.5rem}.tutorial-preview .poster{margin-bottom:1rem}._redesign .tutorial-preview.-folge{position:relative;height:405px;padding:1.5rem;border-radius:24px;background-color:#b9a3cc}._redesign .tutorial-preview.-folge.-klasse-1-2{background-color:#ff7d4d}._redesign .tutorial-preview.-folge.-klasse-3-4{background-color:#6dc290}._redesign .tutorial-preview.-folge.-klasse-5-6{background-color:#b9a3cc}._redesign .tutorial-preview.-folge .preview{display:block;max-height:none}._redesign .tutorial-preview.-folge .container{display:flex;flex-direction:column;gap:1rem}._redesign .tutorial-preview.-folge .container > [view='show']{display:contents}._redesign .tutorial-preview.-folge .container .image{width:100%;height:236px;-o-object-fit:cover;object-fit:cover;border-radius:24px;filter:none}._redesign .tutorial-preview.-folge .container .play-video{display:none}._redesign .tutorial-preview.-folge .container .indicator{position:static;padding:.25rem .5rem;color:#25163b}._redesign .tutorial-preview.-folge .container .indicator .playlist{display:block;width:16px;height:16px;margin-right:.5rem}._redesign .tutorial-preview.-folge .container .indicator .episodes{display:none}._redesign .tutorial-preview.-folge .container .indicator .count{font-family:"EuclidCircularB-Regular-WebS";font-size:13px;font-weight:400;line-height:18px}._redesign .tutorial-preview.-folge:hover .container .image{filter:brightness(92%)}._redesign .tutorial-preview.-folge.-coming-soon .container .image,._redesign .tutorial-preview.-folge.-locked .container .image,._redesign .tutorial-preview.-folge.-coming-soon:hover .container .image,._redesign .tutorial-preview.-folge.-locked:hover .container .image{filter:brightness(70%)}._redesign .tutorial-preview.-folge .strip-component{position:absolute;top:-8px;left:-40px;transform:none;min-width:0;padding:.75rem 2rem;-webkit-mask-size:100% 100%;mask-size:100% 100%}._redesign .tutorial-preview.-folge .strip-component .label{font-family:"EuclidCircularB-Bold-WebS";font-size:26px;font-weight:700;line-height:36px;padding:0;color:#fff}._redesign .tutorial-preview.-folge .preview > [view='show']{margin-bottom:0}._redesign .tutorial-preview.-folge .title{font-family:"kg_happy_solidregular";font-size:22px;font-weight:400;line-height:32px;letter-spacing:-.44px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:.5rem;color:#25163b}._redesign .tutorial-preview.-folge .title .artist{font-family:"EuclidCircularB-Medium-WebS";font-size:26px;font-weight:500;line-height:36px;letter-spacing:0}@media all and (max-width:48rem){._redesign .tutorial-preview.-folge .title{font-family:"kg_happy_solidregular";font-size:20px;font-weight:400;line-height:30px;letter-spacing:-.4px}}._redesign .tutorial-preview.-folge.-free-song .image{border:0}._redesign .tutorial-preview.-folge.-free-song .free-song{position:absolute;top:-8px;bottom:auto;left:-40px;z-index:10;width:auto;height:auto;padding:.75rem 2rem;text-align:left;background-color:#f7c809;-webkit-mask-image:url("/image/strip.svg");mask-image:url("/image/strip.svg");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%}._redesign .tutorial-preview.-folge.-free-song .free-song .label{font-family:"EuclidCircularB-Bold-WebS";font-size:26px;font-weight:700;line-height:36px;color:#25163b}.url-item .link{font-family:"EuclidCircularB-Medium-WebS";font-size:20px;font-weight:500;line-height:30px;color:#e1e1e1}.url-item .link:hover{color:#e67699}@media all and (max-width:48rem){.url-item .link{font-size:18px;line-height:28px}}.url-item .link .svg-icon{margin-right:1rem;margin-top:.25rem}.welcome-banner{background-color:#fff}.welcome-banner .title{font-family:"EuclidCircularB-Bold-WebS";font-size:36px;font-weight:700;line-height:48px;color:#232323}.welcome-banner .bird{width:110px;height:100px;margin:2rem 2rem 2rem 1rem}@media all and (max-width:48rem){.welcome-banner .title{font-family:"EuclidCircularB-Bold-WebS";font-size:30px;font-weight:700;line-height:40px}}@media all and (max-width:40rem){.welcome-banner .title{font-family:"EuclidCircularB-Bold-WebS";font-size:28px;font-weight:700;line-height:38px}}body{overscroll-behavior-y:none}body{overscroll-behavior-y:none}