9 lines
58 KiB
CSS
9 lines
58 KiB
CSS
/*!
|
|
* This source file is part of the Swift.org open source project
|
|
*
|
|
* Copyright (c) 2021 Apple Inc. and the Swift project authors
|
|
* Licensed under Apache License v2.0 with Runtime Library Exception
|
|
*
|
|
* See https://swift.org/LICENSE.txt for license information
|
|
* See https://swift.org/CONTRIBUTORS.txt for Swift project authors
|
|
*/.nav-title-content[data-v-854b4dd6]{max-width:100%}.title[data-v-854b4dd6]{color:var(--color-nav-root-title,currentColor);text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:inline-block;vertical-align:top;max-width:296px}@media only screen and (max-width:1023px){.title[data-v-854b4dd6]{max-width:205px}}@media only screen and (max-width:767px){.title[data-v-854b4dd6]{flex-basis:fill;display:initial;vertical-align:initial;max-width:none}}.subhead[data-v-854b4dd6]{color:var(--color-nav-root-subhead)}.theme-dark .subhead[data-v-854b4dd6]{color:var(--color-nav-dark-root-subhead)}.mobile-dropdown[data-v-2c27d339]{box-sizing:border-box}.nav--in-breakpoint-range .mobile-dropdown[data-v-2c27d339]{padding-left:.2352941176rem;padding-right:.2352941176rem}.mobile-dropdown ul[data-v-2c27d339]{list-style:none}.mobile-dropdown .option[data-v-2c27d339]{cursor:pointer;font-size:.7058823529rem;padding:.5rem 0;display:block;text-decoration:none;color:inherit}.mobile-dropdown .option[data-v-2c27d339]:focus{outline-offset:0}.mobile-dropdown .option.depth1[data-v-2c27d339]{padding-left:.4705882353rem}.active[data-v-2c27d339],.tutorial.router-link-active[data-v-2c27d339]{font-weight:600}.active[data-v-2c27d339]:focus,.tutorial.router-link-active[data-v-2c27d339]:focus{outline:none}.chapter-list[data-v-2c27d339]:not(:first-child){margin-top:1rem}.chapter-name[data-v-2c27d339],.tutorial[data-v-2c27d339]{padding:.5rem 0;font-size:1rem;line-height:1.4705882353;font-weight:400;font-family:var(--typography-html-font,"Helvetica Neue","Helvetica","Arial",sans-serif)}.section-list[data-v-2c27d339],.tutorial-list[data-v-2c27d339]{padding:0 .5882352941rem}.chapter-list:last-child .tutorial-list[data-v-2c27d339]:last-child{padding-bottom:10em}.chapter-list[data-v-2c27d339]{display:inline-block}.form-element[data-v-f934959a]{position:relative}.form-dropdown[data-v-f934959a]{font-size:1rem;line-height:1.2352941176;font-weight:400;font-family:var(--typography-html-font,"Helvetica Neue","Helvetica","Arial",sans-serif);display:block;box-sizing:border-box;width:100%;height:3.3em;color:var(--color-dropdown-text);padding:1.1176470588rem 2.3529411765rem 0 .9411764706rem;text-align:left;border:1px solid var(--color-dropdown-border);border-radius:var(--border-radius,4px);background-clip:padding-box;margin-bottom:.8235294118rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;min-height:32px}.form-dropdown[data-v-f934959a]:focus{box-shadow:0 0 0 4px var(--color-focus-color);outline:none;border-color:var(--color-focus-border-color)}.form-dropdown.no-eyebrow[data-v-f934959a]{padding-top:0}.form-dropdown[data-v-f934959a]:-moz-focusring{color:transparent;text-shadow:0 0 0 var(--color-dropdown-text)}.form-dropdown[data-v-f934959a]::-ms-expand{opacity:0}.form-dropdown~.form-icon[data-v-f934959a]{position:absolute;display:block;pointer-events:none;fill:var(--color-figure-gray-tertiary);right:14px;width:13px;height:auto;top:50%;transform:translateY(-50%)}.is-open .form-dropdown~.form-icon[data-v-f934959a]{transform:translateY(-50%) scale(-1)}@media only screen and (max-width:735px){.form-dropdown~.form-icon[data-v-f934959a]{right:14px}}.form-dropdown~.form-label[data-v-f934959a]{font-size:.7058823529rem;line-height:1.75;font-weight:400;font-family:var(--typography-html-font,"Helvetica Neue","Helvetica","Arial",sans-serif);position:absolute;top:.4705882353rem;left:17px;color:var(--color-figure-gray-secondary);pointer-events:none;padding:0;z-index:1}.form-dropdown[data-v-f934959a] option{color:var(--color-dropdown-text)}.form-dropdown-selectnone[data-v-f934959a]{color:transparent}.form-dropdown-selectnone~.form-label[data-v-f934959a]{font-size:1rem;line-height:1.2352941176;font-weight:400;font-family:var(--typography-html-font,"Helvetica Neue","Helvetica","Arial",sans-serif);top:19px;left:17px;color:var(--color-figure-gray-tertiary)}.form-dropdown-selectnone[data-v-f934959a]:-moz-focusring{text-shadow:none}.form-dropdown-selectnone[data-v-f934959a]::-ms-value{display:none}.theme-dark .form-dropdown[data-v-f934959a]{color:var(--color-dropdown-dark-text);background-color:var(--color-dropdown-dark-background);border-color:var(--color-dropdown-dark-border)}.theme-dark .form-dropdown~.form-label[data-v-f934959a]{color:#ccc}.theme-dark .form-dropdown[data-v-f934959a]:-moz-focusring{color:transparent;text-shadow:0 0 0 var(--color-dropdown-dark-text)}.theme-dark .form-dropdown.form-dropdown-selectnone[data-v-f934959a]{color:transparent}.theme-dark .form-dropdown.form-dropdown-selectnone[data-v-f934959a]:-moz-focusring{text-shadow:none}.theme-dark .form-dropdown-selectnone~.form-label[data-v-f934959a]{color:#b0b0b0}.dropdown-small[data-v-6adda760]{height:30px;display:flex;align-items:center;position:relative;background:var(--color-fill)}.dropdown-small .form-dropdown-toggle[data-v-6adda760]{line-height:1.5;font-size:12px;padding-top:0;padding-bottom:0;padding-left:20px;min-height:unset;height:30px;display:flex;align-items:center}.dropdown-small .form-dropdown-toggle[data-v-6adda760]:focus{box-shadow:none;border-color:var(--color-dropdown-border)}.fromkeyboard .dropdown-small .form-dropdown-toggle[data-v-6adda760]:focus{box-shadow:0 0 0 2px var(--color-focus-color);outline:none;border-color:var(--color-focus-border-color)}.form-dropdown-toggle[data-v-6adda760]{margin:0}.is-open .form-dropdown-toggle[data-v-6adda760]{border-radius:var(--border-radius,4px) var(--border-radius,4px) 0 0;border-bottom:none;padding-bottom:1px}.fromkeyboard .is-open .form-dropdown-toggle[data-v-6adda760]{box-shadow:1px -1px 0 1px var(--color-focus-color),-1px -1px 0 1px var(--color-focus-color);border-color:var(--color-focus-border-color)}.form-dropdown-title[data-v-6adda760]{margin:0;padding:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.dropdown-custom[data-v-6adda760]{border-radius:var(--border-radius,4px)}.dropdown-custom.is-open[data-v-6adda760]{border-radius:var(--border-radius,4px) var(--border-radius,4px) 0 0}.dropdown-custom[data-v-6adda760] .form-dropdown-content{background:var(--color-fill);position:absolute;right:0;left:0;top:100%;border-bottom-left-radius:var(--border-radius,4px);border-bottom-right-radius:var(--border-radius,4px);border:1px solid var(--color-dropdown-border);border-top:none;display:none;overflow-y:auto}.dropdown-custom[data-v-6adda760] .form-dropdown-content.is-open{display:block}.fromkeyboard .dropdown-custom[data-v-6adda760] .form-dropdown-content.is-open{box-shadow:1px 1px 0 1px var(--color-focus-color),-1px 1px 0 1px var(--color-focus-color);border-color:var(--color-focus-border-color);border-top-color:transparent}.nav .dropdown-custom[data-v-6adda760] .form-dropdown-content{max-height:calc(100vh - 116px - 3.05882rem)}.nav--is-sticking.nav .dropdown-custom[data-v-6adda760] .form-dropdown-content{max-height:calc(100vh - 3.05882rem - 72px)}.dropdown-custom[data-v-6adda760] .options{list-style:none;margin:0;padding:0 0 20px}.dropdown-custom[data-v-6adda760] .option{cursor:pointer;padding:5px 20px;font-size:12px;line-height:20px;outline:none}.dropdown-custom[data-v-6adda760] .option:hover{background-color:var(--color-fill-tertiary)}.dropdown-custom[data-v-6adda760] .option.option-active{font-weight:600}.fromkeyboard .dropdown-custom[data-v-6adda760] .option:hover{background-color:transparent}.fromkeyboard .dropdown-custom[data-v-6adda760] .option:focus{background-color:var(--color-fill-tertiary);outline:none}.tutorial-dropdown[data-v-618ff780]{grid-column:3}.section-tracker[data-v-618ff780]{font-size:.7058823529rem;line-height:1.3333333333;font-weight:400;font-family:var(--typography-html-font,"Helvetica Neue","Helvetica","Arial",sans-serif);color:var(--color-figure-gray-secondary);margin-left:15px}.tutorial-dropdown[data-v-03cbd7f7]{grid-column:1/2}.tutorial-dropdown .options[data-v-03cbd7f7]{padding-top:1rem;padding-bottom:0}.tutorial-dropdown .option[data-v-03cbd7f7]{padding:5px 20px 5px 30px}.chapter-list[data-v-03cbd7f7]{padding-bottom:20px}.chapter-name[data-v-03cbd7f7]{margin:0 20px 5px 20px;line-height:normal;color:var(--color-figure-gray-secondary)}.chevron-icon[data-v-1d3fe8ed]{padding:0;color:var(--color-nav-outlines);grid-column:2;height:20px;width:20px;margin:0 4px}@media only screen and (min-width:768px){.nav[data-v-1d3fe8ed] .nav-content{display:grid;grid-template-columns:auto auto 3fr;align-items:center}.nav[data-v-1d3fe8ed] .nav-menu{padding:0;justify-content:flex-start;grid-column:3/5}.nav[data-v-1d3fe8ed] .nav-menu-item{margin:0}}.dropdown-container[data-v-1d3fe8ed]{height:3.0588235294rem;display:grid;grid-template-columns:minmax(230px,285px) auto minmax(230px,1fr);align-items:center}@media only screen and (max-width:1023px){.dropdown-container[data-v-1d3fe8ed]{grid-template-columns:minmax(173px,216px) auto minmax(173px,1fr)}}@media(scripting:none){.dropdown-container[data-v-1d3fe8ed]{display:none}}.separator[data-v-1d3fe8ed]{height:20px;border-right:1px solid;border-color:var(--color-nav-outlines);margin:0 20px;grid-column:2}@media(scripting:none){.separator[data-v-1d3fe8ed]{display:none}}.mobile-dropdown-container[data-v-1d3fe8ed],.nav--in-breakpoint-range.nav .dropdown-container[data-v-1d3fe8ed],.nav--in-breakpoint-range.nav .separator[data-v-1d3fe8ed]{display:none}.nav--in-breakpoint-range.nav .mobile-dropdown-container[data-v-1d3fe8ed]{display:block}.nav--in-breakpoint-range.nav[data-v-1d3fe8ed] .nav-title{grid-area:title}.nav--in-breakpoint-range.nav[data-v-1d3fe8ed] .pre-title{display:none}.nav[data-v-1d3fe8ed] .nav-title{grid-column:1;width:90%;padding-top:0}.primary-dropdown[data-v-1d3fe8ed],.secondary-dropdown[data-v-1d3fe8ed]{background:var(--color-tutorial-navbar-dropdown-background);border-color:var(--color-tutorial-navbar-dropdown-border)}.primary-dropdown[data-v-1d3fe8ed] .form-dropdown,.primary-dropdown[data-v-1d3fe8ed] .form-dropdown:focus,.secondary-dropdown[data-v-1d3fe8ed] .form-dropdown,.secondary-dropdown[data-v-1d3fe8ed] .form-dropdown:focus{border-color:var(--color-tutorial-navbar-dropdown-border)}.primary-dropdown[data-v-1d3fe8ed] .options,.secondary-dropdown[data-v-1d3fe8ed] .options{background:var(--color-tutorial-navbar-dropdown-background);border-color:var(--color-tutorial-navbar-dropdown-border)}[data-v-0861b5be] .code-listing+*,[data-v-0861b5be] aside+*,[data-v-0861b5be] h2+*,[data-v-0861b5be] h3+*,[data-v-0861b5be] ol+*,[data-v-0861b5be] p+*,[data-v-0861b5be] ul+*{margin-top:20px}[data-v-0861b5be] ol ol,[data-v-0861b5be] ol ul,[data-v-0861b5be] ul ol,[data-v-0861b5be] ul ul{margin-top:0}[data-v-0861b5be] h2{font-size:1.8823529412rem;line-height:1.25;font-weight:400;font-family:var(--typography-html-font,"Helvetica Neue","Helvetica","Arial",sans-serif)}@media only screen and (max-width:1250px){[data-v-0861b5be] h2{font-size:1.6470588235rem;line-height:1.2857142857;font-weight:400;font-family:var(--typography-html-font,"Helvetica Neue","Helvetica","Arial",sans-serif)}}@media only screen and (max-width:735px){[data-v-0861b5be] h2{font-size:1.4117647059rem;line-height:1.3333333333;font-weight:400;font-family:var(--typography-html-font,"Helvetica Neue","Helvetica","Arial",sans-serif)}}[data-v-0861b5be] h3{font-size:1.4117647059rem;line-height:1.1666666667;font-weight:400;font-family:var(--typography-html-font,"Helvetica Neue","Helvetica","Arial",sans-serif)}@media only screen and (max-width:1250px){[data-v-0861b5be] h3{font-size:1.2352941176rem;line-height:1.1904761905;font-weight:400;font-family:var(--typography-html-font,"Helvetica Neue","Helvetica","Arial",sans-serif)}}[data-v-0861b5be] .code-listing{background:var(--color-code-background);border-color:var(--colors-grid,var(--color-grid));border-style:solid;border-width:1px}[data-v-0861b5be] .code-listing pre{font-size:.7058823529rem;line-height:1.8333333333;font-weight:400;font-family:var(--typography-html-font-mono,Menlo,monospace);padding:20px 0}.columns[data-v-30edf911]{display:grid;grid-template-rows:repeat(2,auto)}.columns.cols-2[data-v-30edf911]{gap:20px 8.3333333333%;grid-template-columns:repeat(2,1fr)}.columns.cols-3[data-v-30edf911]{gap:20px 4.1666666667%;grid-template-columns:repeat(3,1fr)}.asset[data-v-30edf911]{align-self:end;grid-row:1}.content[data-v-30edf911]{grid-row:2}@media only screen and (max-width:735px){.columns.cols-2[data-v-30edf911],.columns.cols-3[data-v-30edf911]{grid-template-columns:unset}.asset[data-v-30edf911],.content[data-v-30edf911]{grid-row:auto}}.content-and-media[data-v-3fa44f9e]{display:flex}.content-and-media.media-leading[data-v-3fa44f9e]{flex-direction:row-reverse}.content-and-media.media-trailing[data-v-3fa44f9e]{flex-direction:row}@media only screen and (min-width:736px){.content-and-media[data-v-3fa44f9e]{align-items:center;justify-content:center}}.content[data-v-3fa44f9e]{width:62.5%}.asset[data-v-3fa44f9e]{width:29.1666666667%}.media-leading .asset[data-v-3fa44f9e]{margin-right:8.3333333333%}.media-trailing .asset[data-v-3fa44f9e]{margin-left:8.3333333333%}@media only screen and (max-width:735px){.content-and-media.media-leading[data-v-3fa44f9e],.content-and-media.media-trailing[data-v-3fa44f9e]{flex-direction:column}.asset[data-v-3fa44f9e],.content[data-v-3fa44f9e]{width:100%}.media-leading .asset[data-v-3fa44f9e],.media-trailing .asset[data-v-3fa44f9e]{margin:20px 0 0 0}}.group[id][data-v-5b4a8b3c]{margin-top:20px;padding-top:20px}[data-v-5b4a8b3c] img,[data-v-5b4a8b3c] video{display:block;margin:0 auto;max-width:100%}.layout+[data-v-4d5a806e]{margin-top:40px}@media only screen and (max-width:735px){.layout[data-v-4d5a806e]:first-child>:not(.group[id]){margin-top:40px}}.body[data-v-20dca692]{background:var(--colors-text-background,var(--color-article-body-background));margin-left:auto;margin-right:auto;width:1536px;width:980px;border-radius:10px;transform:translateY(-120px)}@media only screen and (max-width:1250px){.body[data-v-20dca692]{width:692px}}@media only screen and (max-width:735px){.body[data-v-20dca692]{width:87.5%}}@media only screen and (max-width:320px){.body[data-v-20dca692]{width:215px}}@media only screen and (max-width:735px){.body[data-v-20dca692]{border-radius:0;transform:none}}.body[data-v-20dca692]~*{margin-top:-40px}.body-content[data-v-20dca692]{padding:40px 8.3333333333% 80px 8.3333333333%}@media only screen and (max-width:735px){.body-content[data-v-20dca692]{padding:0 0 40px 0}}.call-to-action[data-v-2bfdf182]{padding:65px 0;background:var(--color-call-to-action-background)}.theme-dark .call-to-action[data-v-2bfdf182]{--color-call-to-action-background:#424242}.row[data-v-2bfdf182]{margin-left:auto;margin-right:auto;width:1536px;width:980px;display:flex;align-items:center}@media only screen and (max-width:1250px){.row[data-v-2bfdf182]{width:692px}}@media only screen and (max-width:735px){.row[data-v-2bfdf182]{width:87.5%}}@media only screen and (max-width:320px){.row[data-v-2bfdf182]{width:215px}}[data-v-2bfdf182] img,[data-v-2bfdf182] video{max-height:560px}h2[data-v-2bfdf182]{font-size:1.8823529412rem;line-height:1.25;font-weight:400;font-family:var(--typography-html-font,"Helvetica Neue","Helvetica","Arial",sans-serif)}@media only screen and (max-width:1250px){h2[data-v-2bfdf182]{font-size:1.6470588235rem;line-height:1.2857142857;font-weight:400;font-family:var(--typography-html-font,"Helvetica Neue","Helvetica","Arial",sans-serif)}}@media only screen and (max-width:735px){h2[data-v-2bfdf182]{font-size:1.4117647059rem;line-height:1.3333333333;font-weight:400;font-family:var(--typography-html-font,"Helvetica Neue","Helvetica","Arial",sans-serif)}}.label[data-v-2bfdf182]{display:block;font-size:1.2352941176rem;line-height:1.1904761905;font-weight:400;font-family:var(--typography-html-font,"Helvetica Neue","Helvetica","Arial",sans-serif);margin-bottom:var(--spacing-stacked-margin-small);color:var(--color-eyebrow)}@media only screen and (max-width:735px){.label[data-v-2bfdf182]{font-size:1.1176470588rem;line-height:1.2105263158;font-weight:400;font-family:var(--typography-html-font,"Helvetica Neue","Helvetica","Arial",sans-serif)}}.content[data-v-2bfdf182]{margin-bottom:1.5rem}.right-column[data-v-2bfdf182]{margin-left:auto}@media only screen and (max-width:735px){.row[data-v-2bfdf182]{display:block}.col+.col[data-v-2bfdf182]{margin-top:40px}.call-to-action[data-v-426a965c]{margin-top:0}}.headline[data-v-d46a1474]{margin-bottom:var(--spacing-stacked-margin-large)}.heading[data-v-d46a1474]{font-size:2.8235294118rem;line-height:1.0833333333;font-weight:400;font-family:var(--typography-html-font,"Helvetica Neue","Helvetica","Arial",sans-serif);color:var(--color-header-text)}@media only screen and (max-width:1250px){.heading[data-v-d46a1474]{font-size:2.3529411765rem;line-height:1.1;font-weight:400;font-family:var(--typography-html-font,"Helvetica Neue","Helvetica","Arial",sans-serif)}}@media only screen and (max-width:735px){.heading[data-v-d46a1474]{font-size:1.8823529412rem;line-height:1.125;font-weight:400;font-family:var(--typography-html-font,"Helvetica Neue","Helvetica","Arial",sans-serif)}}.dark .heading[data-v-d46a1474]{color:#fff}.eyebrow[data-v-d46a1474]{font-size:1.4117647059rem;line-height:1.1666666667;font-weight:400;font-family:var(--typography-html-font,"Helvetica Neue","Helvetica","Arial",sans-serif);display:block;margin-bottom:var(--spacing-stacked-margin-small);color:var(--color-eyebrow)}@media only screen and (max-width:1250px){.eyebrow[data-v-d46a1474]{font-size:1.2352941176rem;line-height:1.1904761905;font-weight:400;font-family:var(--typography-html-font,"Helvetica Neue","Helvetica","Arial",sans-serif)}}.generic-modal[data-v-795f7b59]{position:fixed;top:0;left:0;right:0;bottom:0;margin:0;z-index:11000;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;background:none;overflow:auto}.modal-fullscreen[data-v-795f7b59]{align-items:stretch}.modal-fullscreen .container[data-v-795f7b59]{margin:0;flex:1;width:100%;height:100%;padding-top:env(safe-area-inset-top);padding-right:env(safe-area-inset-right);padding-bottom:env(safe-area-inset-bottom);padding-left:env(safe-area-inset-left)}.modal-standard[data-v-795f7b59]{padding:20px}.modal-standard .container[data-v-795f7b59]{padding:60px;border-radius:var(--border-radius,4px)}@media screen{[data-color-scheme=dark] .modal-standard .container[data-v-795f7b59]{background:#1d1d1f}}@media screen and (prefers-color-scheme:dark){[data-color-scheme=auto] .modal-standard .container[data-v-795f7b59]{background:#1d1d1f}}@media only screen and (max-width:735px){.modal-standard[data-v-795f7b59]{padding:0;align-items:stretch}.modal-standard .container[data-v-795f7b59]{margin:20px 0 0;padding:50px 30px;flex:1;width:100%;border-bottom-left-radius:0;border-bottom-right-radius:0}}.backdrop[data-v-795f7b59]{overflow:auto;background:var(--backdrop-background,rgba(0,0,0,.4));-webkit-overflow-scrolling:touch;width:100%;height:100%;position:fixed}.container[data-v-795f7b59]{margin-left:auto;margin-right:auto;width:1536px;width:980px;background:var(--colors-generic-modal-background,var(--color-generic-modal-background));z-index:1;position:relative;overflow:auto;max-width:100%}@media only screen and (max-width:1250px){.container[data-v-795f7b59]{width:692px}}@media only screen and (max-width:735px){.container[data-v-795f7b59]{width:87.5%}}@media only screen and (max-width:320px){.container[data-v-795f7b59]{width:215px}}.close[data-v-795f7b59]{position:absolute;z-index:9999;top:22px;left:22px;width:17px;height:17px;color:#666;cursor:pointer;background:none;border:0;display:flex;align-items:center}.close .close-icon[data-v-795f7b59]{fill:currentColor;width:100%;height:100%}.theme-dark .container[data-v-795f7b59]{background:#000}.theme-dark .container .close[data-v-795f7b59]{color:#b0b0b0}.theme-code .container[data-v-795f7b59]{background-color:var(--code-background,var(--color-code-background))}.metadata[data-v-94ff76c0]{display:flex}.item[data-v-94ff76c0]{font-size:.7058823529rem;line-height:1.3333333333;font-weight:600;font-family:var(--typography-html-font,"Helvetica Neue","Helvetica","Arial",sans-serif);display:flex;flex-direction:column;justify-content:flex-end;align-items:center;border-right:1px solid #fff;padding:0 27.5px}@media only screen and (max-width:735px){.item[data-v-94ff76c0]{font-size:.6470588235rem;line-height:1.6363636364;font-weight:600;font-family:var(--typography-html-font,"Helvetica Neue","Helvetica","Arial",sans-serif);padding:0 8px}}.item[data-v-94ff76c0]:first-of-type{padding-left:0}.item[data-v-94ff76c0]:last-of-type{border:none}@media only screen and (max-width:735px){.item[data-v-94ff76c0]:last-of-type{padding-right:0}}.content[data-v-94ff76c0]{color:#fff}.icon[data-v-94ff76c0]{font-size:2.8235294118rem;line-height:1.0833333333;font-weight:400;font-family:var(--typography-html-font,"Helvetica Neue","Helvetica","Arial",sans-serif)}@media only screen and (max-width:1250px){.icon[data-v-94ff76c0]{font-size:2.3529411765rem;line-height:1.1;font-weight:400;font-family:var(--typography-html-font,"Helvetica Neue","Helvetica","Arial",sans-serif)}}@media only screen and (max-width:735px){.icon[data-v-94ff76c0]{font-size:1.8823529412rem;line-height:1.125;font-weight:400;font-family:var(--typography-html-font,"Helvetica Neue","Helvetica","Arial",sans-serif)}}.small-icon[data-v-94ff76c0]{width:1em;height:1em;margin-left:.2rem}.small-icon.xcode-icon[data-v-94ff76c0]{width:.8em;height:.8em}.content-link[data-v-94ff76c0]{display:flex;align-items:center}a[data-v-94ff76c0]{color:var(--colors-link,var(--color-tutorials-overview-link))}.duration[data-v-94ff76c0]{display:flex;align-items:baseline;font-size:2.3529411765rem;line-height:1;font-weight:400;font-family:var(--typography-html-font,"Helvetica Neue","Helvetica","Arial",sans-serif);line-height:1.8rem}@media only screen and (max-width:735px){.duration[data-v-94ff76c0]{font-size:1.6470588235rem;line-height:1;font-weight:400;font-family:var(--typography-html-font,"Helvetica Neue","Helvetica","Arial",sans-serif);line-height:1.3rem}}.minutes[data-v-94ff76c0]{display:inline-block;font-size:1.6470588235rem;line-height:1;font-weight:400;font-family:var(--typography-html-font,"Helvetica Neue","Helvetica","Arial",sans-serif);line-height:1.3rem}@media only screen and (max-width:735px){.minutes[data-v-94ff76c0]{font-size:1rem;line-height:1.2352941176;font-weight:400;font-family:var(--typography-html-font,"Helvetica Neue","Helvetica","Arial",sans-serif);line-height:.8rem}}.item-large-icon[data-v-94ff76c0]{height:2.3rem;max-width:100%}@media only screen and (max-width:735px){.item-large-icon[data-v-94ff76c0]{height:1.5rem;max-width:100%}}.bottom[data-v-94ff76c0]{margin-top:13px}@media only screen and (max-width:735px){.bottom[data-v-94ff76c0]{margin-top:8px}}.hero[data-v-2a434750]{background-color:var(--color-tutorial-hero-background);color:var(--color-tutorial-hero-text);position:relative}@media screen{.hero.dark[data-v-2a434750]{--color-fill:#fff;--color-fill-secondary:#f7f7f7;--color-fill-tertiary:#f0f0f0;--color-fill-quaternary:#282828;--color-fill-blue:#00f;--color-fill-light-blue-secondary:#d1d1ff;--color-fill-gray:#ccc;--color-fill-gray-secondary:#f5f5f5;--color-fill-gray-tertiary:#f0f0f0;--color-fill-gray-quaternary:#f0f0f0;--color-fill-green-secondary:#f0fff0;--color-fill-orange-secondary:#fffaf6;--color-fill-red-secondary:#fff0f5;--color-figure-blue:#36f;--color-figure-gray:#000;--color-figure-gray-secondary:#666;--color-figure-gray-secondary-alt:#666;--color-figure-gray-tertiary:#666;--color-figure-green:green;--color-figure-light-gray:#666;--color-figure-orange:#c30;--color-figure-red:red;--color-tutorials-teal:#000;--color-article-background:var(--color-fill-tertiary);--color-article-body-background:var(--color-fill);--color-aside-deprecated:var(--color-figure-gray);--color-aside-deprecated-background:var(--color-fill-orange-secondary);--color-aside-deprecated-border:var(--color-figure-orange);--color-aside-experiment:var(--color-figure-gray);--color-aside-experiment-background:var(--color-fill-gray-secondary);--color-aside-experiment-border:var(--color-figure-light-gray);--color-aside-important:var(--color-figure-gray);--color-aside-important-background:var(--color-fill-gray-secondary);--color-aside-important-border:var(--color-figure-light-gray);--color-aside-note:var(--color-figure-gray);--color-aside-note-background:var(--color-fill-gray-secondary);--color-aside-note-border:var(--color-figure-light-gray);--color-aside-tip:var(--color-figure-gray);--color-aside-tip-background:var(--color-fill-gray-secondary);--color-aside-tip-border:var(--color-figure-light-gray);--color-aside-warning:var(--color-figure-gray);--color-aside-warning-background:var(--color-fill-red-secondary);--color-aside-warning-border:var(--color-figure-red);--color-badge-text:#fff;--color-badge-default:var(--color-figure-gray);--color-badge-beta:var(--color-figure-gray-tertiary);--color-badge-deprecated:var(--color-figure-orange);--color-badge-dark-default:#fff;--color-badge-dark-beta:#b0b0b0;--color-badge-dark-deprecated:#f60;--color-button-background:var(--color-fill-blue);--color-button-background-active:#36f;--color-button-background-hover:var(--color-figure-blue);--color-button-text:#fff;--color-call-to-action-background:var(--color-fill-secondary);--color-changes-added:var(--color-figure-light-gray);--color-changes-added-hover:var(--color-figure-light-gray);--color-changes-deprecated:var(--color-figure-light-gray);--color-changes-deprecated-hover:var(--color-figure-light-gray);--color-changes-modified:var(--color-figure-light-gray);--color-changes-modified-hover:var(--color-figure-light-gray);--color-changes-modified-previous-background:var(--color-fill);--color-code-background:var(--color-fill-secondary);--color-code-collapsible-background:var(--color-fill-tertiary);--color-code-collapsible-text:var(--color-figure-gray-secondary-alt);--color-code-line-highlight:rgba(51,102,255,.08);--color-code-line-highlight-border:var(--color-figure-blue);--color-code-plain:var(--color-figure-gray);--color-dropdown-background:hsla(0,0%,100%,.8);--color-dropdown-border:#ccc;--color-dropdown-option-text:#666;--color-dropdown-text:#000;--color-dropdown-dark-background:hsla(0,0%,100%,.1);--color-dropdown-dark-border:hsla(0,0%,94%,.2);--color-dropdown-dark-option-text:#ccc;--color-dropdown-dark-text:#fff;--color-eyebrow:var(--color-figure-gray-secondary);--color-focus-border-color:var(--color-fill-blue);--color-focus-color:rgba(0,125,250,.6);--color-form-error:var(--color-figure-red);--color-form-error-background:var(--color-fill-red-secondary);--color-form-valid:var(--color-figure-green);--color-form-valid-background:var(--color-fill-green-secondary);--color-generic-modal-background:var(--color-fill);--color-grid:var(--color-fill-gray);--color-header-text:var(--color-figure-gray);--color-hero-eyebrow:#ccc;--color-link:var(--color-figure-blue);--color-loading-placeholder-background:var(--color-fill);--color-nav-color:#000;--color-nav-current-link:#000;--color-nav-expanded:#fff;--color-nav-hierarchy-collapse-background:#f0f0f0;--color-nav-hierarchy-collapse-borders:#ccc;--color-nav-hierarchy-item-borders:#ccc;--color-nav-keyline:rgba(0,0,0,.2);--color-nav-link-color:#000;--color-nav-link-color-hover:#36f;--color-nav-outlines:#ccc;--color-nav-rule:hsla(0,0%,94%,.5);--color-nav-solid-background:#fff;--color-nav-sticking-expanded-keyline:rgba(0,0,0,.1);--color-nav-stuck:hsla(0,0%,100%,.9);--color-nav-uiblur-expanded:hsla(0,0%,100%,.9);--color-nav-uiblur-stuck:hsla(0,0%,100%,.7);--color-nav-root-subhead:var(--color-tutorials-teal);--color-nav-dark-border-top-color:hsla(0,0%,100%,.4);--color-nav-dark-color:#fff;--color-nav-dark-current-link:#fff;--color-nav-dark-expanded:#2a2a2a;--color-nav-dark-hierarchy-collapse-background:#424242;--color-nav-dark-hierarchy-collapse-borders:#666;--color-nav-dark-hierarchy-item-borders:#424242;--color-nav-dark-keyline:rgba(66,66,66,.95);--color-nav-dark-link-color:#fff;--color-nav-dark-link-color-hover:#09f;--color-nav-dark-outlines:#575757;--color-nav-dark-rule:#575757;--color-nav-dark-solid-background:#000;--color-nav-dark-sticking-expanded-keyline:rgba(66,66,66,.7);--color-nav-dark-stuck:rgba(42,42,42,.9);--color-nav-dark-uiblur-expanded:rgba(42,42,42,.9);--color-nav-dark-uiblur-stuck:rgba(42,42,42,.7);--color-nav-dark-root-subhead:#fff;--color-other-decl-button:var(--color-text-background);--color-runtime-preview-background:var(--color-fill-tertiary);--color-runtime-preview-disabled-text:hsla(0,0%,40%,.6);--color-runtime-preview-text:var(--color-figure-gray-secondary);--color-secondary-label:var(--color-figure-gray-secondary);--color-step-background:var(--color-fill-secondary);--color-step-caption:var(--color-figure-gray-secondary);--color-step-focused:var(--color-figure-light-gray);--color-step-text:var(--color-figure-gray-secondary);--color-svg-icon:#666;--color-syntax-addition:var(--color-figure-green);--color-syntax-attributes:#947100;--color-syntax-characters:#272ad8;--color-syntax-comments:#707f8c;--color-syntax-deletion:var(--color-figure-red);--color-syntax-documentation-markup:#506375;--color-syntax-documentation-markup-keywords:#506375;--color-syntax-heading:#ba2da2;--color-syntax-highlighted:rgba(0,113,227,.2);--color-syntax-keywords:#ad3da4;--color-syntax-marks:#000;--color-syntax-numbers:#272ad8;--color-syntax-other-class-names:#703daa;--color-syntax-other-constants:#4b21b0;--color-syntax-other-declarations:#047cb0;--color-syntax-other-function-and-method-names:#4b21b0;--color-syntax-other-instance-variables-and-globals:#703daa;--color-syntax-other-preprocessor-macros:#78492a;--color-syntax-other-type-names:#703daa;--color-syntax-param-internal-name:#404040;--color-syntax-plain-text:#000;--color-syntax-preprocessor-statements:#78492a;--color-syntax-project-class-names:#3e8087;--color-syntax-project-constants:#2d6469;--color-syntax-project-function-and-method-names:#2d6469;--color-syntax-project-instance-variables-and-globals:#3e8087;--color-syntax-project-preprocessor-macros:#78492a;--color-syntax-project-type-names:#3e8087;--color-syntax-strings:#d12f1b;--color-syntax-type-declarations:#03638c;--color-syntax-urls:#1337ff;--color-tabnav-item-border-color:var(--color-fill-gray);--color-text:var(--color-figure-gray);--color-text-background:var(--color-fill);--color-tutorial-assessments-background:var(--color-fill-secondary);--color-tutorial-background:var(--color-fill);--color-tutorial-navbar-dropdown-background:var(--color-fill);--color-tutorial-navbar-dropdown-border:var(--color-fill-gray);--color-tutorial-quiz-border-active:var(--color-figure-blue);--color-tutorials-overview-background:#161616;--color-tutorials-overview-content:#fff;--color-tutorials-overview-content-alt:#fff;--color-tutorials-overview-eyebrow:#ccc;--color-tutorials-overview-icon:#b0b0b0;--color-tutorials-overview-link:#09f;--color-tutorials-overview-navigation-link:#ccc;--color-tutorials-overview-navigation-link-active:#fff;--color-tutorials-overview-navigation-link-hover:#fff;--color-tutorial-hero-text:#fff;--color-tutorial-hero-background:#000;--color-navigator-item-hover:rgba(0,0,255,.05);--color-card-background:var(--color-fill);--color-card-content-text:var(--color-figure-gray);--color-card-eyebrow:var(--color-figure-gray-secondary-alt);--color-card-shadow:rgba(0,0,0,.04);--color-link-block-card-border:rgba(0,0,0,.04);--color-standard-red:#ffc2c2;--color-standard-orange:#fc9;--color-standard-yellow:#ffe0a3;--color-standard-blue:#9cf;--color-standard-green:#9cc;--color-standard-purple:#ccf;--color-standard-gray:#f0f0f0;--color-fill:#000;--color-fill-secondary:#161616;--color-fill-tertiary:#2a2a2a;--color-fill-blue:#06f;--color-fill-light-blue-secondary:#004ec4;--color-fill-gray:#575757;--color-fill-gray-secondary:#222;--color-fill-gray-tertiary:#424242;--color-fill-gray-quaternary:#424242;--color-fill-green-secondary:#030;--color-fill-orange-secondary:#472400;--color-fill-red-secondary:#300;--color-figure-blue:#09f;--color-figure-gray:#fff;--color-figure-gray-secondary:#ccc;--color-figure-gray-secondary-alt:#b0b0b0;--color-figure-gray-tertiary:#b0b0b0;--color-figure-green:#090;--color-figure-light-gray:#b0b0b0;--color-figure-orange:#f60;--color-figure-red:#f33;--color-tutorials-teal:#fff;--color-article-body-background:#111;--color-badge-text:#000;--color-badge-default:var(--color-badge-dark-default);--color-button-background-active:#06f;--color-code-line-highlight:rgba(0,153,255,.08);--color-dropdown-background:var(--color-dropdown-dark-background);--color-dropdown-border:var(--color-dropdown-dark-border);--color-dropdown-option-text:var(--color-dropdown-dark-option-text);--color-dropdown-text:var(--color-dropdown-dark-text);--color-nav-color:var(--color-nav-dark-color);--color-nav-current-link:var(--color-nav-dark-current-link);--color-nav-expanded:var(--color-nav-dark-expanded);--color-nav-hierarchy-collapse-background:var(--color-nav-dark-hierarchy-collapse-background);--color-nav-hierarchy-collapse-borders:var(--color-nav-dark-hierarchy-collapse-borders);--color-nav-hierarchy-item-borders:var(--color-nav-dark-hierarchy-item-borders);--color-nav-keyline:var(--color-nav-dark-keyline);--color-nav-link-color:var(--color-nav-dark-link-color);--color-nav-link-color-hover:var(--color-nav-dark-link-color-hover);--color-nav-outlines:var(--color-nav-dark-outlines);--color-nav-rule:var(--color-nav-dark-rule);--color-nav-solid-background:var(--color-nav-dark-solid-background);--color-nav-sticking-expanded-keyline:var(--color-nav-dark-sticking-expanded-keyline);--color-nav-stuck:var(--color-nav-dark-stuck);--color-nav-uiblur-expanded:var(--color-nav-dark-uiblur-expanded);--color-nav-uiblur-stuck:var(--color-nav-dark-uiblur-stuck);--color-runtime-preview-disabled-text:hsla(0,0%,80%,.6);--color-syntax-attributes:#cc9768;--color-syntax-characters:#d9c97c;--color-syntax-comments:#7f8c98;--color-syntax-documentation-markup:#7f8c98;--color-syntax-documentation-markup-keywords:#a3b1bf;--color-syntax-highlighted:rgba(0,113,227,.6);--color-syntax-keywords:#ff7ab2;--color-syntax-marks:#fff;--color-syntax-numbers:#d9c97c;--color-syntax-other-class-names:#dabaff;--color-syntax-other-constants:#a7ebdd;--color-syntax-other-declarations:#4eb0cc;--color-syntax-other-function-and-method-names:#b281eb;--color-syntax-other-instance-variables-and-globals:#b281eb;--color-syntax-other-preprocessor-macros:#ffa14f;--color-syntax-other-type-names:#dabaff;--color-syntax-param-internal-name:#bfbfbf;--color-syntax-plain-text:#fff;--color-syntax-preprocessor-statements:#ffa14f;--color-syntax-project-class-names:#acf2e4;--color-syntax-project-constants:#78c2b3;--color-syntax-project-function-and-method-names:#78c2b3;--color-syntax-project-instance-variables-and-globals:#78c2b3;--color-syntax-project-preprocessor-macros:#ffa14f;--color-syntax-project-type-names:#acf2e4;--color-syntax-strings:#ff8170;--color-syntax-type-declarations:#6bdfff;--color-syntax-urls:#69f;--color-tutorial-background:var(--color-fill-tertiary);--color-navigator-item-hover:rgba(0,102,255,.5);--color-card-shadow:hsla(0,0%,100%,.04);--color-link-block-card-border:hsla(0,0%,100%,.25);--color-standard-red:#8b0000;--color-standard-orange:#8b4000;--color-standard-yellow:#8f7200;--color-standard-blue:#002d75;--color-standard-green:#023b2d;--color-standard-purple:#512b55;--color-standard-gray:#2a2a2a}}.bg[data-v-2a434750]{background-color:var(--color-tutorial-hero-background);background-position:top;background-repeat:no-repeat;background-size:cover;content:"";height:100%;left:0;opacity:.3;position:absolute;top:0;width:100%}.row[data-v-2a434750]{margin-left:auto;margin-right:auto;width:1536px;width:980px;padding:80px 0}@media only screen and (max-width:1250px){.row[data-v-2a434750]{width:692px}}@media only screen and (max-width:735px){.row[data-v-2a434750]{width:87.5%}}@media only screen and (max-width:320px){.row[data-v-2a434750]{width:215px}}.col[data-v-2a434750]{z-index:1}[data-v-2a434750] .eyebrow{font-size:1.4117647059rem;line-height:1.1666666667;font-weight:400;font-family:var(--typography-html-font,"Helvetica Neue","Helvetica","Arial",sans-serif);color:var(--color-hero-eyebrow)}@media only screen and (max-width:1250px){[data-v-2a434750] .eyebrow{font-size:1.2352941176rem;line-height:1.1904761905;font-weight:400;font-family:var(--typography-html-font,"Helvetica Neue","Helvetica","Arial",sans-serif)}}.headline[data-v-2a434750]{font-size:2.8235294118rem;line-height:1.0833333333;font-weight:400;font-family:var(--typography-html-font,"Helvetica Neue","Helvetica","Arial",sans-serif);margin-bottom:2rem}@media only screen and (max-width:1250px){.headline[data-v-2a434750]{font-size:2.3529411765rem;line-height:1.1;font-weight:400;font-family:var(--typography-html-font,"Helvetica Neue","Helvetica","Arial",sans-serif)}}@media only screen and (max-width:735px){.headline[data-v-2a434750]{font-size:1.8823529412rem;line-height:1.125;font-weight:400;font-family:var(--typography-html-font,"Helvetica Neue","Helvetica","Arial",sans-serif)}}.intro[data-v-2a434750]{font-size:1.2352941176rem;line-height:1.380952381;font-weight:400;font-family:var(--typography-html-font,"Helvetica Neue","Helvetica","Arial",sans-serif)}@media only screen and (max-width:735px){.intro[data-v-2a434750]{font-size:1.1176470588rem;line-height:1.4210526316;font-weight:400;font-family:var(--typography-html-font,"Helvetica Neue","Helvetica","Arial",sans-serif)}}.content+p[data-v-2a434750]{margin-top:var(--spacing-stacked-margin-large)}@media only screen and (max-width:735px){.content+p[data-v-2a434750]{margin-top:8px}}.call-to-action[data-v-2a434750]{display:flex;align-items:center}.call-to-action .cta-icon[data-v-2a434750]{margin-left:.4rem;width:1em;height:1em}.metadata[data-v-2a434750]{margin-top:2rem}.video-asset[data-v-2a434750]{display:grid;height:100vh;margin:0;place-items:center center}.video-asset[data-v-2a434750] video{max-width:1280px;min-width:320px;width:100%}@media only screen and (max-width:735px){.headline[data-v-2a434750]{margin-bottom:19px}}.tutorial-hero[data-v-35a9482f]{margin-bottom:80px}@media only screen and (max-width:735px){.tutorial-hero[data-v-35a9482f]{margin-bottom:0}}.title[data-v-28135d78]{font-size:.7058823529rem;line-height:1.3333333333;color:var(--colors-secondary-label,var(--color-secondary-label))}.title[data-v-28135d78],.title[data-v-61b03ec2]{font-weight:400;font-family:var(--typography-html-font,"Helvetica Neue","Helvetica","Arial",sans-serif)}.title[data-v-61b03ec2]{font-size:1.1176470588rem;line-height:1.2105263158;color:var(--colors-header-text,var(--color-header-text));margin:25px 0}.question-content[data-v-61b03ec2] code{font-size:.7647058824rem;line-height:1.8461538462;font-weight:400;font-family:var(--typography-html-font-mono,Menlo,monospace)}.choices[data-v-61b03ec2]{display:flex;flex-direction:column;padding:0;list-style:none;margin:25px 0}.choice[data-v-61b03ec2]{font-size:.8235294118rem;line-height:1.4285714286;font-weight:400;font-family:var(--typography-html-font,"Helvetica Neue","Helvetica","Arial",sans-serif);flex:1;border-radius:var(--border-radius,4px);margin:8px 0;padding:1.5rem 40px;cursor:pointer;background:var(--colors-text-background,var(--color-text-background));display:flex;flex-direction:column;justify-content:center;border-width:1px;border-style:solid;border-color:var(--colors-grid,var(--color-grid));position:relative}.choice[data-v-61b03ec2] img{max-height:23.5294117647rem}.choice[data-v-61b03ec2]:first-of-type{margin-top:0}.choice[data-v-61b03ec2] code{font-size:.7647058824rem;line-height:1.8461538462;font-weight:400;font-family:var(--typography-html-font-mono,Menlo,monospace)}.controls[data-v-61b03ec2]{text-align:center;margin-bottom:40px}.controls .button-cta[data-v-61b03ec2]{margin:.5rem;margin-top:0;padding:.3rem 3rem;min-width:8rem}input[type=radio][data-v-61b03ec2]{position:absolute;width:100%;left:0;height:100%;opacity:0;z-index:-1}.active[data-v-61b03ec2]{border-color:var(--color-tutorial-quiz-border-active);box-shadow:0 0 0 4px var(--color-focus-color);outline:none}.active [data-v-61b03ec2]{color:var(--colors-text,var(--color-text))}.correct[data-v-61b03ec2]{background:var(--color-form-valid-background);border-color:var(--color-form-valid)}.correct .choice-icon[data-v-61b03ec2]{fill:var(--color-form-valid)}.incorrect[data-v-61b03ec2]{background:var(--color-form-error-background);border-color:var(--color-form-error)}.incorrect .choice-icon[data-v-61b03ec2]{fill:var(--color-form-error)}.correct[data-v-61b03ec2],.incorrect[data-v-61b03ec2]{position:relative}.correct .choice-icon[data-v-61b03ec2],.incorrect .choice-icon[data-v-61b03ec2]{position:absolute;top:11px;left:10px;font-size:20px;width:1.05em}.disabled[data-v-61b03ec2]{pointer-events:none}.answer[data-v-61b03ec2]{margin:.5rem 1.5rem .5rem 0;font-size:.7058823529rem;line-height:1.3333333333;font-weight:400;font-family:var(--typography-html-font,"Helvetica Neue","Helvetica","Arial",sans-serif)}.answer[data-v-61b03ec2]:last-of-type{margin-bottom:0}[data-v-61b03ec2] .question>.code-listing{padding:unset;border-radius:0}[data-v-61b03ec2] pre{padding:0}[data-v-61b03ec2] img{display:block;margin-left:auto;margin-right:auto;max-width:100%}.title[data-v-65e3c02c]{font-size:1.8823529412rem;line-height:1.25;font-weight:400;font-family:var(--typography-html-font,"Helvetica Neue","Helvetica","Arial",sans-serif);color:var(--colors-header-text,var(--color-header-text))}@media only screen and (max-width:1250px){.title[data-v-65e3c02c]{font-size:1.6470588235rem;line-height:1.2857142857;font-weight:400;font-family:var(--typography-html-font,"Helvetica Neue","Helvetica","Arial",sans-serif)}}@media only screen and (max-width:735px){.title[data-v-65e3c02c]{font-size:1.4117647059rem;line-height:1.3333333333;font-weight:400;font-family:var(--typography-html-font,"Helvetica Neue","Helvetica","Arial",sans-serif)}}.title p[data-v-65e3c02c]{color:var(--colors-text,var(--color-text))}.assessments[data-v-65e3c02c]{box-sizing:content-box;padding:0 1rem;background:var(--color-tutorial-assessments-background);margin-left:auto;margin-right:auto;width:1536px;width:980px;margin-bottom:80px}@media only screen and (max-width:1250px){.assessments[data-v-65e3c02c]{width:692px}}@media only screen and (max-width:735px){.assessments[data-v-65e3c02c]{width:87.5%}}@media only screen and (max-width:320px){.assessments[data-v-65e3c02c]{width:215px}}.banner[data-v-65e3c02c]{padding:40px 0;border-bottom:1px solid;margin-bottom:40px;border-color:var(--colors-grid,var(--color-grid));text-align:center}.success[data-v-65e3c02c]{text-align:center;padding-bottom:40px;font-size:1.8823529412rem;line-height:1.25;font-weight:400;font-family:var(--typography-html-font,"Helvetica Neue","Helvetica","Arial",sans-serif);color:var(--colors-text,var(--color-text))}@media only screen and (max-width:1250px){.success[data-v-65e3c02c]{font-size:1.6470588235rem;line-height:1.2857142857;font-weight:400;font-family:var(--typography-html-font,"Helvetica Neue","Helvetica","Arial",sans-serif)}}@media only screen and (max-width:735px){.success[data-v-65e3c02c]{font-size:1.4117647059rem;line-height:1.3333333333;font-weight:400;font-family:var(--typography-html-font,"Helvetica Neue","Helvetica","Arial",sans-serif)}}.assessments-wrapper[data-v-65e3c02c]{padding-top:80px}.assessments-wrapper[data-v-6db06128]{padding-bottom:40px;padding-top:0}@media only screen and (max-width:735px){.assessments-wrapper[data-v-6db06128]{padding-top:80px}}.article[data-v-9d2d5cc2]{background:var(--colors-article-background,var(--color-article-background))}@media only screen and (max-width:735px){.article[data-v-9d2d5cc2]{background:var(--colors-text-background,var(--color-article-body-background))}}.intro-container[data-v-7dcf2d10]{margin-bottom:80px}.intro[data-v-7dcf2d10]{display:flex;align-items:center}@media only screen and (max-width:735px){.intro[data-v-7dcf2d10]{padding-bottom:0;flex-direction:column}}.intro.ide .media[data-v-7dcf2d10] img{background-color:var(--colors-text-background,var(--color-text-background))}.col.left[data-v-7dcf2d10]{padding-right:40px}@media only screen and (max-width:1250px){.col.left[data-v-7dcf2d10]{padding-right:28px}}@media only screen and (max-width:735px){.col.left[data-v-7dcf2d10]{margin-left:auto;margin-right:auto;width:1536px;width:980px;padding-right:0}}@media only screen and (max-width:735px)and (max-width:1250px){.col.left[data-v-7dcf2d10]{width:692px}}@media only screen and (max-width:735px)and (max-width:735px){.col.left[data-v-7dcf2d10]{width:87.5%}}@media only screen and (max-width:735px)and (max-width:320px){.col.left[data-v-7dcf2d10]{width:215px}}.col.right[data-v-7dcf2d10]{padding-left:40px}@media only screen and (max-width:1250px){.col.right[data-v-7dcf2d10]{padding-left:28px}}@media only screen and (max-width:735px){.col.right[data-v-7dcf2d10]{padding-left:0}}.content[data-v-7dcf2d10]{font-size:1rem;line-height:1.4705882353;font-weight:400;font-family:var(--typography-html-font,"Helvetica Neue","Helvetica","Arial",sans-serif)}.media[data-v-7dcf2d10] img{width:auto;max-height:560px;min-height:18.8235294118rem;-o-object-fit:scale-down;object-fit:scale-down}@media only screen and (max-width:735px){.media[data-v-7dcf2d10]{margin:0;margin-top:40px}.media[data-v-7dcf2d10] image,.media[data-v-7dcf2d10] video{max-height:80vh}}.media[data-v-7dcf2d10] .asset{padding:0 20px}.headline[data-v-7dcf2d10]{color:var(--colors-header-text,var(--color-header-text))}[data-v-7dcf2d10] .eyebrow{font-size:1.2352941176rem;line-height:1.1904761905;font-weight:400;font-family:var(--typography-html-font,"Helvetica Neue","Helvetica","Arial",sans-serif)}@media only screen and (max-width:735px){[data-v-7dcf2d10] .eyebrow{font-size:1.1176470588rem;line-height:1.2105263158;font-weight:400;font-family:var(--typography-html-font,"Helvetica Neue","Helvetica","Arial",sans-serif)}}[data-v-7dcf2d10] .eyebrow a{color:inherit}[data-v-7dcf2d10] .heading{font-size:1.8823529412rem;line-height:1.25;font-weight:400;font-family:var(--typography-html-font,"Helvetica Neue","Helvetica","Arial",sans-serif)}@media only screen and (max-width:1250px){[data-v-7dcf2d10] .heading{font-size:1.6470588235rem;line-height:1.2857142857;font-weight:400;font-family:var(--typography-html-font,"Helvetica Neue","Helvetica","Arial",sans-serif)}}@media only screen and (max-width:735px){[data-v-7dcf2d10] .heading{font-size:1.4117647059rem;line-height:1.3333333333;font-weight:400;font-family:var(--typography-html-font,"Helvetica Neue","Helvetica","Arial",sans-serif)}}.expanded-intro[data-v-7dcf2d10]{margin-left:auto;margin-right:auto;width:1536px;width:980px;margin-top:40px}@media only screen and (max-width:1250px){.expanded-intro[data-v-7dcf2d10]{width:692px}}@media only screen and (max-width:735px){.expanded-intro[data-v-7dcf2d10]{width:87.5%}}@media only screen and (max-width:320px){.expanded-intro[data-v-7dcf2d10]{width:215px}}[data-v-7dcf2d10] .cols-2{gap:20px 16.6666666667%}[data-v-7dcf2d10] .cols-3 .column{gap:20px 12.5%}.code-preview[data-v-395e30cd]{position:sticky;overflow-y:auto;-webkit-overflow-scrolling:touch;background-color:var(--background,var(--color-step-background));height:calc(100vh - 3.05882rem)}.code-preview.ide[data-v-395e30cd]{height:100vh}.code-preview[data-v-395e30cd] .code-listing{color:var(--text,var(--color-code-plain))}.code-preview[data-v-395e30cd] .code-listing .code-line-container{padding-right:14px}.code-preview[data-v-395e30cd] pre{font-size:.7058823529rem;line-height:1.8333333333;font-weight:400;font-family:var(--typography-html-font-mono,Menlo,monospace)}.header[data-v-395e30cd]{font-size:.7058823529rem;line-height:1.3333333333;font-weight:400;font-family:var(--typography-html-font,"Helvetica Neue","Helvetica","Arial",sans-serif);position:relative;display:flex;justify-content:space-between;align-items:center;width:-webkit-fill-available;width:-moz-available;width:stretch;cursor:pointer;font-weight:600;padding:8px 12px;border-radius:var(--border-radius,4px) var(--border-radius,4px) 0 0;z-index:1;background:var(--color-runtime-preview-background);color:var(--colors-runtime-preview-text,var(--color-runtime-preview-text))}.header[data-v-395e30cd]:focus{outline-style:none}#app.fromkeyboard .header[data-v-395e30cd]:focus{box-shadow:0 0 0 4px var(--color-focus-color);outline:none;border-color:var(--color-focus-border-color)}.runtime-preview[data-v-395e30cd]{--color-runtime-preview-shadow:rgba(0,0,0,.4);position:absolute;top:0;right:0;background:var(--color-runtime-preview-background);border-radius:var(--border-radius,4px);margin:1rem;margin-left:0;transition:width .2s ease-in;box-shadow:0 0 3px 0 var(--color-runtime-preview-shadow)}@media screen{[data-color-scheme=dark] .runtime-preview[data-v-395e30cd]{--color-runtime-preview-shadow:hsla(0,0%,100%,.4)}}@media screen and (prefers-color-scheme:dark){[data-color-scheme=auto] .runtime-preview[data-v-395e30cd]{--color-runtime-preview-shadow:hsla(0,0%,100%,.4)}}@supports not ((width:-webkit-fill-available) or (width:-moz-available) or (width:stretch)){.runtime-preview[data-v-395e30cd]{display:flex;flex-direction:column}}.runtime-preview .runtimve-preview__container[data-v-395e30cd]{border-radius:var(--border-radius,4px);overflow:hidden}.runtime-preview-ide[data-v-395e30cd]{top:0}.runtime-preview-ide .runtime-preview-asset[data-v-395e30cd] img{background-color:var(--color-runtime-preview-background)}.runtime-preview.collapsed[data-v-395e30cd]{box-shadow:0 0 3px 0 var(--color-runtime-preview-shadow);width:102px}.runtime-preview.collapsed .header[data-v-395e30cd]{border-radius:var(--border-radius,4px)}.runtime-preview.disabled[data-v-395e30cd]{box-shadow:0 0 3px 0 transparent}.runtime-preview.disabled .header[data-v-395e30cd]{color:var(--color-runtime-preview-disabled-text);cursor:auto}.runtime-preview-asset[data-v-395e30cd]{border-radius:0 0 var(--border-radius,4px) var(--border-radius,4px)}.runtime-preview-asset[data-v-395e30cd] img{border-bottom-left-radius:var(--border-radius,4px);border-bottom-right-radius:var(--border-radius,4px)}.preview-icon[data-v-395e30cd]{height:.8em;width:.8em;-webkit-user-select:none;-moz-user-select:none;user-select:none}.preview-show[data-v-395e30cd]{transform:scale(-1)}[data-v-0bdf2f26] pre{padding:10px 0}.toggle-preview[data-v-78763c14]{color:var(--color-runtime-preview-disabled-text);display:flex;align-items:center}a[data-v-78763c14]{color:var(--url,var(--color-link))}.toggle-text[data-v-78763c14]{display:flex;align-items:center}svg.toggle-icon[data-v-78763c14]{width:1em;height:1em;margin-left:.5em}.mobile-code-preview[data-v-b1691954]{background-color:var(--background,var(--color-step-background));padding:14px 0}@media only screen and (max-width:735px){.mobile-code-preview[data-v-b1691954]{display:flex;flex-direction:column}}.runtime-preview-modal-content[data-v-b1691954]{padding:45px 60px 0 60px;min-width:200px}.runtime-preview-modal-content[data-v-b1691954] img:not(.file-icon){border-radius:var(--border-radius,4px);box-shadow:0 0 3px rgba(0,0,0,.4);max-height:80vh;width:auto;display:block;margin-bottom:1rem}.runtime-preview-modal-content .runtime-preview-label[data-v-b1691954]{font-size:.7058823529rem;line-height:1.3333333333;font-weight:400;font-family:var(--typography-html-font,"Helvetica Neue","Helvetica","Arial",sans-serif);color:var(--color-runtime-preview-text);display:block;text-align:center;padding:.5em}[data-v-b1691954] .code-listing{color:var(--text,var(--color-code-plain))}[data-v-b1691954] .full-code-listing{padding-top:60px;min-height:calc(100vh - 60px)}[data-v-b1691954] pre{font-size:.7058823529rem;line-height:1.8333333333;font-weight:400;font-family:var(--typography-html-font-mono,Menlo,monospace)}.preview-toggle-container[data-v-b1691954]{align-self:flex-end;margin-right:20px}.step-container[data-v-d0198556]{margin:0}.step-container[data-v-d0198556]:not(:last-child){margin-bottom:100px}@media only screen and (max-width:735px){.step-container[data-v-d0198556]:not(:last-child){margin-bottom:80px}}.step[data-v-d0198556]{position:relative;border-radius:var(--tutorial-step-border-radius,var(--border-radius,4px));padding:1rem 2rem;background-color:var(--color-step-background);overflow:hidden;filter:blur(0)}.step[data-v-d0198556]:before{content:"";position:absolute;top:0;left:0;border:1px solid var(--color-step-focused);background-color:var(--color-step-focused);height:calc(100% - 2px);width:4px;opacity:0;transition:opacity .15s ease-in}.step.focused[data-v-d0198556],.step[data-v-d0198556]:focus{outline:none}.step.focused[data-v-d0198556]:before,.step[data-v-d0198556]:focus:before{opacity:1}:root.no-js .step.focused[data-v-d0198556]:before,:root.no-js .step[data-v-d0198556]:focus:before{opacity:0}@media only screen and (max-width:735px){.step[data-v-d0198556]{padding-left:2rem}.step[data-v-d0198556]:before{opacity:1}}.step-label[data-v-d0198556]{font-size:.7058823529rem;line-height:1.3333333333;font-weight:600;font-family:var(--typography-html-font,"Helvetica Neue","Helvetica","Arial",sans-serif);color:var(--colors-text,var(--color-step-text));margin-bottom:var(--spacing-stacked-margin-small)}.caption[data-v-d0198556]{border-top:1px solid;border-color:var(--color-step-caption);padding:1rem 0 0 0;margin-top:1rem}.media-container[data-v-d0198556]{display:none}@media only screen and (max-width:735px){.step[data-v-d0198556]{margin:0 .5882352941rem 1.1764705882rem .5882352941rem}.step.focused[data-v-d0198556],.step[data-v-d0198556]:focus{outline:none}.media-container[data-v-d0198556]{display:block;position:relative}.media-container[data-v-d0198556] img,.media-container[data-v-d0198556] video{max-height:80vh}[data-v-d0198556] .asset{padding:0 20px}}.steps[data-v-e3061a7c]{position:relative;font-size:.8235294118rem;line-height:1.4285714286;font-weight:400;font-family:var(--typography-html-font,"Helvetica Neue","Helvetica","Arial",sans-serif);display:flex;color:var(--colors-text,var(--color-text))}@media only screen and (max-width:735px){.steps[data-v-e3061a7c]{padding-top:80px}.steps[data-v-e3061a7c]:before{position:absolute;top:0;border-top:1px solid var(--color-fill-gray-tertiary);content:"";width:calc(100% - 2.35294rem);margin:0 1.1764705882rem}}.steps[data-v-e3061a7c] aside{background:unset;border:unset;box-shadow:unset;-moz-column-break-inside:unset;break-inside:unset;padding:unset}.steps[data-v-e3061a7c] aside .label{font-size:.7058823529rem;line-height:1.3333333333;font-weight:600;font-family:var(--typography-html-font,"Helvetica Neue","Helvetica","Arial",sans-serif)}.steps[data-v-e3061a7c] aside+*{margin-top:var(--spacing-stacked-margin-large)}.content-container[data-v-e3061a7c]{flex:none;margin-right:4.1666666667%;width:37.5%;margin-top:140px;margin-bottom:94vh}@media only screen and (max-width:735px){.content-container[data-v-e3061a7c]{margin-top:0;margin-bottom:0;height:100%;margin-left:0;margin-right:0;position:relative;width:100%}}.asset-container[data-v-e3061a7c]{flex:none;height:calc(100vh - 3.05882rem);background-color:var(--background,var(--color-step-background));max-width:921px;width:calc(50vw + 8.33333%);position:sticky;top:3.0588235294rem;transition:margin .1s ease-in-out}@media only screen and (max-width:767px){.asset-container[data-v-e3061a7c]{top:2.8235294118rem;height:calc(100vh - 2.82353rem)}}.asset-container[data-v-e3061a7c]:not(.for-step-code){overflow-y:auto;-webkit-overflow-scrolling:touch}.asset-container.ide[data-v-e3061a7c]{height:100vh;top:0}@media only screen and (min-width:736px){.asset-container[data-v-e3061a7c]{display:grid}.asset-container>[data-v-e3061a7c]{grid-row:1;grid-column:1;height:calc(100vh - 3.05882rem)}.asset-container.ide>[data-v-e3061a7c]{height:100vh}}.asset-container .step-asset[data-v-e3061a7c]{box-sizing:border-box;padding:0;padding-left:40px;min-height:320px;height:100%}.asset-container .step-asset[data-v-e3061a7c],.asset-container .step-asset[data-v-e3061a7c] picture{height:100%;display:flex;align-items:center}.asset-container .step-asset[data-v-e3061a7c] .video-replay-container{height:100%;display:flex;flex-direction:column;justify-content:center}.asset-container .step-asset[data-v-e3061a7c] img,.asset-container .step-asset[data-v-e3061a7c] video{width:auto;max-height:calc(100vh - 3.05882rem - 80px);max-width:531.66667px;margin:0}@media only screen and (max-width:1250px){.asset-container .step-asset[data-v-e3061a7c] img,.asset-container .step-asset[data-v-e3061a7c] video{max-width:363.66667px}}.asset-container .step-asset[data-v-e3061a7c] .video-replay-container,.asset-container .step-asset[data-v-e3061a7c] img{min-height:320px}.asset-container .step-asset[data-v-e3061a7c] .video-replay-container video{min-height:280px}.asset-container .step-asset[data-v-e3061a7c] [data-orientation=landscape]{max-width:min(841px,calc(50vw + 8.33333% - 80px))}@media only screen and (max-width:735px){.asset-container[data-v-e3061a7c]{display:none}}.asset-wrapper[data-v-e3061a7c]{width:63.2%;align-self:center;transition:transform .25s ease-out;will-change:transform}.asset-wrapper.ide .step-asset[data-v-e3061a7c] img{background-color:var(--background,var(--color-step-background))}.asset-wrapper[data-v-e3061a7c]:has([data-orientation=landscape]){width:unset}[data-v-e3061a7c] .runtime-preview-asset{display:grid}[data-v-e3061a7c] .runtime-preview-asset>*{grid-row:1;grid-column:1}.interstitial[data-v-e3061a7c]{padding:0 2rem}.interstitial[data-v-e3061a7c]:not(:first-child){margin-top:5.8823529412rem}.interstitial[data-v-e3061a7c]:not(:last-child){margin-bottom:30px}@media only screen and (max-width:735px){.interstitial[data-v-e3061a7c]{margin-left:auto;margin-right:auto;width:1536px;width:980px;padding:0}}@media only screen and (max-width:735px)and (max-width:1250px){.interstitial[data-v-e3061a7c]{width:692px}}@media only screen and (max-width:735px)and (max-width:735px){.interstitial[data-v-e3061a7c]{width:87.5%}}@media only screen and (max-width:735px)and (max-width:320px){.interstitial[data-v-e3061a7c]{width:215px}}@media only screen and (max-width:735px){.interstitial[data-v-e3061a7c]:not(:first-child){margin-top:0}}.fade-enter-active[data-v-e3061a7c],.fade-leave-active[data-v-e3061a7c]{transition:opacity .3s ease-in-out}.fade-enter[data-v-e3061a7c],.fade-leave-to[data-v-e3061a7c]{opacity:0}.section[data-v-6b3a0b3a]{padding-top:80px}.sections[data-v-79a75e9e]{margin-left:auto;margin-right:auto;width:1536px;width:980px}@media only screen and (max-width:1250px){.sections[data-v-79a75e9e]{width:692px}}@media only screen and (max-width:735px){.sections[data-v-79a75e9e]{width:87.5%}}@media only screen and (max-width:320px){.sections[data-v-79a75e9e]{width:215px}}@media only screen and (max-width:735px){.sections[data-v-79a75e9e]{margin:0;width:100%}}.tutorial[data-v-1631abcb]{background-color:var(--colors-text-background,var(--color-tutorial-background))} |