.styles_parentLayout__S1p39{width:100%;flex-grow:1;position:relative;overflow:hidden;display:flex}.styles_texture__l7_JJ{position:absolute;inset:0;background:var(--background-paper-child-article);mix-blend-mode:var(--mix-blend-mode-paper);transform:translateZ(0)}.styles_childLayout__0i8_M{flex-direction:column}.styles_childLayout__0i8_M,.styles_layout__SXRWV{width:100%;flex-grow:1;position:relative;display:flex}.styles_layout__SXRWV{z-index:var(--z-index-note-main-layout);background:var(--background)}.styles_layout__7SA90{width:100%;display:grid;grid:"editor  output" auto "input   output" 1fr/1fr 1fr;grid-gap:var(--gap-section-m);gap:var(--gap-section-m);align-content:start;justify-items:start;align-items:start}.styles_layout__7SA90.styles_withCopy__f_rmo{grid:"copy    output" auto "editor  output" auto "input   output" 1fr/1fr 1fr}.styles_layout__7SA90.styles_paragraphMaxWidthAuto__X5DUG{grid-template-columns:minmax(0,var(--max-width-paragraph)) 1fr}.styles_editor__OWR_W{width:100%;grid-area:editor}.styles_input__ukK4_{width:100%;grid-area:input}.styles_output__VbLUy{width:100%;grid-area:output}.styles_copy__Cm55y{width:100%;grid-area:copy}@media (max-width:900px){.styles_layout__7SA90,.styles_layout__7SA90.styles_paragraphMaxWidthAuto__X5DUG{grid:"output" auto "editor" auto "input" auto/1fr;justify-items:center}.styles_layout__7SA90.styles_paragraphMaxWidthAuto__X5DUG.styles_withCopy__f_rmo,.styles_layout__7SA90.styles_withCopy__f_rmo{grid:"copy" auto "output" auto "editor" auto "input" auto/1fr}.styles_output__VbLUy{display:flex;justify-content:center;min-width:0!important}}.styles_parent__o2UUS{width:100%;height:var(--height-page-header);position:-webkit-sticky;position:sticky;top:calc(var(--padding-frame) + var(--width-border));z-index:var(--z-index-header);display:grid;border-bottom:var(--border);border-color:var(--color-border);background:var(--background-parent)}.styles_parent__o2UUS.styles_column2__vFIw_{grid-template-columns:var(--width-note-aside) var(--width-border) 4fr}.styles_parent__o2UUS.styles_column3__hXM3t{grid-template-columns:1fr var(--width-border) 3fr 1fr}.styles_parent__o2UUS:before{content:"";position:absolute;inset:0;background:var(--background-child);mix-blend-mode:var(--mix-blend-mode);transform:translateZ(0)}.styles_line__tYX5T{width:var(--width-border);height:calc(100% + 2 * var(--width-border));position:relative;translate:0 calc(-1 * var(--width-border));background:var(--color-header-line)}.styles_center__noCgl{height:100%;display:flex;align-items:center;overflow:hidden}.styles_right__ADwEc{display:flex}@media (min-width:701px){.styles_parent__o2UUS:has(a:not(.styles_right__ADwEc a):first-child:is(:hover,:focus-visible)) .styles_line__tYX5T{background:var(--color-header-line-hover)}}@media (max-width:1370px){.styles_parent__o2UUS.styles_column3__hXM3t{grid-template-columns:1fr var(--width-border) 1fr 1fr}}@media (max-width:1208px){.styles_parent__o2UUS{top:0;left:0}.styles_parent__o2UUS.styles_column2__vFIw_{grid-template-columns:1fr var(--width-border) 2fr}}@media (max-width:800px){.styles_parent__o2UUS.styles_column3__hXM3t{grid-template-columns:2fr var(--width-border) 1fr}.styles_parent__o2UUS.styles_column2__vFIw_{grid-template-columns:1fr}.styles_parent__o2UUS.styles_column2__vFIw_ .styles_center__noCgl,.styles_parent__o2UUS.styles_column2__vFIw_ .styles_line__tYX5T,.styles_parent__o2UUS.styles_column3__hXM3t .styles_center__noCgl{display:none}}@media (max-width:600px){.styles_parent__o2UUS.styles_column3__hXM3t{grid-template-columns:1fr var(--width-border) auto}.styles_parent__o2UUS.styles_column3__hXM3t .styles_right__ADwEc>:first-child{display:none}}.styles_layout__YLbgn{width:100%;border-top:var(--border-dashed)}.styles_layout__iMH9A{width:100%;display:flex;flex-direction:column;align-self:center}.styles_layout__iMH9A.styles_gapS__Q4VVO{gap:var(--gap-section-s)}.styles_layout__iMH9A.styles_gapM__E9MPj{gap:var(--gap-section-m)}.styles_layout__iMH9A.styles_gapL__zmVIk{gap:var(--gap-section-l)}.styles_parentLayout__t92Q0{width:100%}.styles_imgLayout__vCB3D{--gap:var(--gap-layout-img-text);shape-margin:var(--gap)}.styles_imgLayout__vCB3D.styles_photo__JAZp_{position:relative;z-index:2;border:var(--width-border-photo-frame) solid transparent;filter:var(--filter-photo)}.styles_imgLayout__vCB3D.styles_floatLeft__q4xvG{float:left;padding-right:var(--gap)}.styles_imgLayout__vCB3D.styles_floatRight__dXjfq{float:right;padding-left:var(--gap)}@media (max-width:700px){.styles_withMediaQuery___62gF{display:flex;flex-direction:column-reverse;gap:var(--gap-section-l)}.styles_withMediaQuery___62gF .styles_imgLayout__vCB3D{max-width:100%;align-self:center}.styles_withMediaQuery___62gF .styles_floatLeft__q4xvG{padding-right:0}.styles_withMediaQuery___62gF .styles_floatRight__dXjfq{padding-left:0}}.styles_header__ElllK{max-width:var(--max-width-paragraph);padding-bottom:var(--size-s);line-height:0;display:flex;flex-direction:column;border-bottom:var(--border)}.styles_span__bOicP{opacity:0}.styles_layout__imiJl{--padding:calc(4 * var(--grid-square));padding:0 var(--padding-section-x);isolation:isolate}.styles_path__d8lqX{white-space:nowrap;line-height:0;color:var(--color-text)}.styles_link__BRd7C{position:relative;cursor:pointer;text-decoration:underline;color:var(--color-text)}.styles_link__BRd7C:before,.styles_paperTextureParent__2HP3v{content:"";width:calc(100% + 2 * var(--padding));height:100px;position:absolute;top:50%;left:50%;translate:-50% -50%}.styles_paperTextureParent__2HP3v{display:none;pointer-events:none;background:var(--background-parent-hover)}.styles_paperTextureChild__hX3vI{width:100%;height:100%;background:var(--background-child-hover);mix-blend-mode:var(--mix-blend-mode-hover);transform:translateZ(0)}.styles_span__vWBBr{position:relative;z-index:1}@media (min-width:701px){.styles_link__BRd7C:hover{color:var(--color-text-hover)}.styles_link__BRd7C:focus-visible{color:var(--color-text-focus)}.styles_link__BRd7C:focus-visible:before{background:var(--background-focus)}.styles_link__BRd7C:hover .styles_paperTextureParent__2HP3v{display:unset}}.styles_layout__bKWF9{position:absolute;top:50%;left:50%;translate:-50% -50%;filter:sepia(.4)}.styles_button__SQDb5{position:absolute;top:calc(50% - 62px);left:calc(50%);translate:-50% -50%;cursor:pointer}.styles_button__SQDb5:disabled{pointer-events:none}.styles_truncate__Proqn{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.styles_layout__7Xa1_{position:absolute;right:0;bottom:var(--height-page-header);mix-blend-mode:var(--mix-blend-mode-image);transform:translateZ(0);opacity:var(--opacity-hadleys-hope)}@media (max-width:1500px){.styles_layout__7Xa1_{right:unset;left:520px}}.styles_layout__YiKZn{position:absolute;bottom:calc(16 * var(--grid-square));left:50%;translate:-50%;mix-blend-mode:var(--mix-blend-mode-image);transform:translateZ(0);filter:opacity(var(--opacity-watermark))}.styles_svg__M5l_h{width:0;height:0;position:absolute;visibility:hidden;pointer-events:none}.styles_h2__4LqGY{width:100%;line-height:0;text-transform:uppercase;letter-spacing:var(--letter-spacing-s)}.styles_h2__4LqGY.styles_large__UO7TI{letter-spacing:var(--letter-spacing-l)}.styles_layout__IWZVe{width:100%;height:100%;position:relative;padding:0 var(--padding-header);display:flex;align-items:center;color:var(--color-text-heading)}.styles_isLink__jsHme:after{content:"";position:absolute;inset:0}@media (min-width:701px){.styles_isLink__jsHme:hover{color:var(--color-text-hover);background:var(--background-parent-hover)}.styles_isLink__jsHme:hover:not(:focus-visible):after{background:var(--background-child-hover);mix-blend-mode:var(--mix-blend-mode-hover);transform:translateZ(0)}.styles_isLink__jsHme:focus-visible{color:var(--color-text-focus);background:var(--background-focus)}}.styles_p__71FtY{color:var(--color-text);max-width:var(--max-width-paragraph);position:relative}.styles_p__71FtY *{color:inherit}.styles_p__71FtY em,.styles_p__71FtY i,.styles_p__71FtY strong em,.styles_p__71FtY strong i{font-weight:var(--font-weight-400);font-variation-settings:var(--roboto-flex-slant-10)}.styles_p__71FtY sup{font-size:var(--type-scale-x-small);line-height:0}.styles_p__71FtY b{color:var(--background);background:var(--color-text);outline:2px solid var(--color-text);font-weight:var(--font-weight-400)}.styles_p__71FtY code{display:inline-block;word-break:break-word;font-size:var(--type-scale-small);font-weight:700;font-variation-settings:var(--font-weight-700)}.styles_p__71FtY b code{display:inline}.styles_sideSpan__J5B_o{position:absolute;top:0;left:0;color:var(--black-light);letter-spacing:var(--letter-spacing-l);text-transform:uppercase;transform-origin:bottom right;translate:calc(-100% - 19px) -100%;transform:rotate(-90deg)}@media (max-width:1208px){.styles_sideSpan__J5B_o{display:none}}.button_layout__kiPeF{--transition-fast:all 120ms ease;--transition-med:all 240ms ease;display:flex;flex-direction:column;gap:calc(2 * var(--grid-square))}.button_button__5sG0Z{width:calc(50 * var(--grid-square));height:calc(12 * var(--grid-square));position:relative;overflow:hidden;padding:0 calc(8 * var(--grid-square));background:#d7c9ac;cursor:pointer;border:var(--border);transition:var(--transition-med);-webkit-tap-highlight-color:transparent}.button_button__5sG0Z[data-state=HOVER]{box-shadow:0 0 2px 1px rgba(0,0,0,.25);background:#ded2ba;transition:var(--transition-fast)}.button_button__5sG0Z[data-state=ACTIVE],.button_button__5sG0Z[data-state=ACTIVE_BASIC]{background:#d1c09f;transition:var(--transition-fast)}.button_button__5sG0Z[data-state=LOADING],.button_button__5sG0Z[data-state=LOADING_BASIC]{pointer-events:none;color:inherit}.button_button__5sG0Z[data-state=LOADING_BASIC]{border:none;background:none}.button_warning__jcT7o{width:100%;height:100%;position:absolute;top:0;left:-100%;background:var(--red-light);transition:transform 1.4s linear;pointer-events:none}.button_warning__jcT7o[data-state=ACTIVE],.button_warning__jcT7o[data-state=LOADING]{transform:translateX(100%)}.button_allTextLayout__INghG{width:300%;height:100%;position:absolute;top:0;left:0;display:flex;pointer-events:none}.button_allTextLayout__INghG[data-state=ACTIVE]{transform:translateX(-33.3%)}.button_allTextLayout__INghG[data-state=LOADING],.button_allTextLayout__INghG[data-state=LOADING_BASIC]{transform:translateX(-66.7%)}.button_textLayout__bOCaJ{flex:1 1;height:100%;display:flex;justify-content:center;align-items:center;pointer-events:none}.button_text__SyuO8{position:relative}.button_initialButtonText__jDtv_{letter-spacing:var(--letter-spacing-s)}@keyframes button_blinkKeyframes__UI6du{0%{opacity:1}50%{opacity:0}to{opacity:1}}.button_blink__KFTMw{animation:button_blinkKeyframes__UI6du 1s infinite}.button_borderBottom__Q9CAr{width:100%;height:1px;position:absolute;bottom:-1px;left:0;background:var(--black-light);transition:var(--transition-med)}.button_borderBottom__Q9CAr[data-state=HOVER]{transform:translateY(-1px)}.button_insetShadow__TU5Cv{position:absolute;inset:0;box-shadow:inset 0 0 0 0 rgba(0,0,0,.5);pointer-events:none;transition:var(--transition-fast)}.button_insetShadow__TU5Cv[data-state=ACTIVE],.button_insetShadow__TU5Cv[data-state=ACTIVE_BASIC],.button_insetShadow__TU5Cv[data-state=LOADING]{box-shadow:inset 0 2px 2px 1px rgba(0,0,0,.5)}.styles_iframe___l77y{height:120px;overflow:hidden;isolation:isolate;border:var(--border);border-radius:var(--radius-m);filter:var(--filter-iframe)}.styles_iframe___l77y,.styles_list__ma4jh{width:100%;max-width:var(--max-width-paragraph)}.styles_list__ma4jh{--gap:var(--size-m);--padding-left:calc(3.5 * var(--grid-square));display:flex;flex-direction:column;gap:var(--gap)}.styles_list__ma4jh.styles_ul__s29V0{padding-left:var(--padding-left)}.styles_list__ma4jh.styles_ol__h5w8g{padding-left:calc(4.5 * var(--grid-square));counter-reset:section}.styles_li__QaRtz{position:relative}.styles_marker__m5HFF{position:absolute;display:inline}@media (max-width:700px){.styles_marker__m5HFF{font-size:var(--type-scale-med)}}.styles_marker__m5HFF.styles_default__35E3P{left:-14px}.styles_marker__m5HFF.styles_tldr__bypLM{translate:0 .3em;left:-10px}.styles_marker__m5HFF.styles_darkCircle___0w1d{left:calc(-3 * var(--grid-square));translate:0 1px}.styles_marker__m5HFF.styles_number__f2shE{left:calc(-3.75 * var(--grid-square));translate:0 .175em}.styles_list__ma4jh li ol,.styles_list__ma4jh li ul{margin-top:var(--gap);padding-left:var(--padding-left)}.styles_list__ma4jh p{display:inline-block!important}.styles_list__ma4jh p+p{margin-top:var(--gap)!important;display:block!important}.styles_parentLayout__T0nxh{width:100%;display:flex;flex-direction:column;gap:calc(8 * var(--grid-square))}@media (max-width:700px){.styles_parentLayout__T0nxh{display:none}}.styles_widgetLayout__MuokT{width:100%;display:grid;grid-template:"button input" auto "button list" auto/200px minmax(0,var(--max-width-paragraph));grid-gap:calc(6 * var(--grid-square)) calc(16 * var(--grid-square));gap:calc(6 * var(--grid-square)) calc(16 * var(--grid-square))}.styles_buttonLayout__91jcK{grid-area:button;width:100%;height:100%;display:flex}.styles_inputLayout__zDIql{grid-area:input}.styles_listLayout__eGHU_{position:relative}.styles_absoluteLayout__Fwzki{position:absolute;top:0;left:0}.styles_hidden__ZLrvE{opacity:0;pointer-events:none}.styles_a__5FNYC{position:relative;line-height:0;white-space:nowrap;color:inherit;cursor:pointer;text-decoration:underline;color:var(--color-text)}.styles_a__5FNYC:before{content:"";height:var(--size-click-target-min);width:calc(100% + var(--size-xl));position:absolute;top:50%;left:50%;translate:-50% -50%}.styles_a__5FNYC.styles_large__8u4Ol:before{height:var(--size-click-target-large)}.styles_aAllLinksLink__J42iM:before{width:calc(100% + 2 * var(--padding-header))}.styles_a__5FNYC:hover{color:var(--color-text-hover)}.styles_a__5FNYC:hover:before{background:var(--background-hover)}.styles_a__5FNYC:focus-visible{color:var(--color-text-focus)}.styles_a__5FNYC:focus-visible:before{background:var(--background-focus)}.styles_textLayout__3D9Zd{position:relative;z-index:1;white-space:nowrap}.styles_selected__xqJQQ{color:var(--color-text-hover);pointer-events:none;text-decoration:none}.styles_selected__xqJQQ:before{background:var(--background-hover)}.styles_gridUl__GHyLm{--gap-grid-y:calc(2 * var(--padding-header));width:100%;padding:var(--padding-header) 0;display:grid;grid:"js                 jsPerf             react             state           threeJs     " auto "js                 webAPI             .                 .               .           " auto "css                html               svg               misc            .           " auto "design             gameDevJournal     story             .               .           " auto/1fr 1fr 1fr 1fr 1fr;grid-gap:var(--gap-grid-y) 0;gap:var(--gap-grid-y) 0;justify-content:start}.styles_categoryLi__sW1gX{width:100%;position:relative;padding:0 var(--padding-header);display:flex;flex-direction:column;gap:calc(var(--size-m) + 4px);align-items:flex-start}.styles_linksUl__Z7_tD{--gap:var(--size-m)}.styles_linkLi__5j5BA,.styles_linksUl__Z7_tD{width:100%;display:flex;flex-direction:column;gap:var(--gap)}.styles_linkContentLayout__ysL2s{width:100%;text-transform:uppercase}.styles_linksUl__Z7_tD .styles_linksUl__Z7_tD .styles_linkContentLayout__ysL2s{position:relative;padding-left:calc(5 * var(--grid-square))}.styles_subHeadingIconLayout__2bHGk{position:absolute;top:50%;translate:0 -50%;z-index:1;display:none}.styles_linksUl__Z7_tD .styles_linksUl__Z7_tD .styles_subHeadingIconLayout__2bHGk{display:unset}.styles_heading__2eOUk{color:var(--color-text-heading);line-height:0}.styles_line__G_Oat{grid-column:1/-1;width:calc(100% + var(--padding-header));height:1px;translate:calc(-1 * var(--padding-header)) calc(-.5 * var(--gap-grid-y));border-bottom:var(--border)}.styles_line1__sRlbb{grid-row:3}.styles_line2__0lrib{grid-row:4}@media (max-width:1370px){.styles_gridUl__GHyLm{grid:"js             jsPerf             react        " auto "js             state              threeJs      " auto "js             webAPI             .            " auto "css            html               svg          " auto "misc           .                  .            " auto "design         gameDevJournal     story        " auto/1fr 1fr 1fr}.styles_line1__sRlbb{grid-row:4}.styles_line2__0lrib{grid-row:6}}@media (max-width:800px){.styles_gridUl__GHyLm{display:none}}.styles_li__nzmn0{width:100%;display:flex}.styles_li__nzmn0.styles_selected__rsAFV .styles_a__LZoQy:not(:focus-visible){color:var(--color-text-selected);background:var(--background-selected)}.styles_a__LZoQy{--padding:calc(9 * var(--grid-square));width:100%;height:var(--size-click-target-min);padding:0 var(--padding);display:flex;align-items:center;cursor:pointer}.styles_a__LZoQy.styles_indent__W1xjZ{--padding:calc(13 * var(--grid-square));padding-right:var(--padding-header)}.styles_a__LZoQy:hover{color:var(--color-text-hover);background:var(--background-hover)}.styles_a__LZoQy:focus-visible{color:var(--color-text-focus);background:var(--background-focus)}.styles_aText__yVovN{position:relative;color:inherit}.styles_prefixLayout__kM5F3{--gap:var(--size-xs);position:absolute;bottom:0;right:calc(100% + var(--gap));translate:calc(-1 * var(--padding) + var(--gap));text-transform:uppercase}.styles_li__nzmn0:not(.styles_selected__rsAFV):hover .styles_prefixLayout__kM5F3,.styles_selected__rsAFV .styles_prefixLayout__kM5F3{translate:0;transition:var(--transition)}.styles_ul__SyV0d{width:100%;display:grid;grid-template-columns:repeat(2,1fr);grid-auto-flow:column;grid-gap:var(--size-m) var(--size-l);gap:var(--size-m) var(--size-l)}.styles_li__ze5O_{width:100%;display:flex;text-transform:uppercase}.styles_li__ze5O_>*{width:100%}@media (max-width:700px){.styles_ul__SyV0d{grid-template-columns:1fr;grid-auto-flow:unset;gap:var(--size-xl)}}.styles_layout__Aq012{width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:var(--size-s)}.styles_iframe__VQE8r{width:100%;overflow:hidden;isolation:isolate;border:var(--border);border-radius:var(--radius-l);background:var(--color-border);filter:var(--filter-iframe)}.styles_iframe__VQE8r.styles_codePen__EBYHx{border:none;outline:var(--border);outline-width:2px;outline-offset:-2px}.styles_linkLayout__RGqCu{display:flex;padding-left:var(--size-l)}@media (max-width:700px){.styles_iframe__VQE8r{
        /* !important to override style attribute */aspect-ratio:9/16!important;max-height:80vh}}.styles_parentLayout__woYm9{max-width:100%;position:relative}.styles_parentLayout__woYm9.styles_noShrink__oCknw{overflow:auto}.styles_imgLayout__Y3E_d{position:absolute;top:0;left:0}.styles_parentLayout__woYm9::-webkit-scrollbar-track{background:transparent}.styles_parentLayout__woYm9::-webkit-scrollbar-thumb{background:transparent;border:var(--border)}.styles_svg__blGvt{width:500px;aspect-ratio:1;flex-shrink:0}.styles_path__dokZs{fill:none;stroke-width:2px;stroke:var(--color-text)}.styles_circle__Qn4MD{fill:var(--color-text)}.styles_line__znYoT{stroke-width:1px;stroke:var(--color-text)}.styles_lineDashed__j3NwI{stroke-width:2px;stroke-dasharray:2px;stroke:var(--color-text)}