@font-face{font-family:Inter;src:url("/National_Library/20160517234414oe_/https://interactive-examples.mdn.mozilla.net/media/fonts/Inter.var.woff2") format("woff2 supports variations"),url("/National_Library/20160517234414oe_/https://interactive-examples.mdn.mozilla.net/media/fonts/Inter.var.woff2") format("woff2-variations");font-weight:1 999;font-stretch:75% 100%;font-style:oblique 0deg 20deg;font-display:swap}:root{--font-fallback:BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-sans;--font-body:Inter,var(--font-fallback);--font-code:Consolas,"Courier New",monospace;--type-body-l:400 1rem/1.1876 var(--font-body);--type-emphasis-m:600 0.8125rem/1.23 var(--font-body);--font-heading:var(--font-body);--type-label-s:600 0.625rem/1.2 var(--font-heading);--type-code-regular:400 0.875rem/1.5 var(--font-code);--elem-radius:0.25rem;--button-height:2rem;--button-radius:var(--elem-radius)}.theme-light,:root{--text-primary:#1b1b1b;--text-secondary:#4e4e4e;--text-inactive:#9e9e9ea6;--text-link:#0069c2;--text-invert:#fff;--background-primary:#fff;--background-secondary:#f9f9fb;--background-tertiary:#fff;--background-toc-active:#ebeaea;--background-mark-yellow:rgba(199, 183, 0, 0.4);--background-mark-green:rgba(0, 208, 97, 0.4);--background-information:rgba(0, 133, 242, 0.1);--background-warning:rgba(255, 42, 81, 0.1);--background-critical:rgba(211, 0, 56, 0.1);--background-success:rgba(0, 121, 54, 0.1);--border-primary:#cdcdcd;--border-secondary:#cdcdcd;--button-primary-default:#1b1b1b;--button-primary-hover:#696969;--button-primary-active:#9e9e9e;--button-primary-inactive:#1b1b1b;--button-secondary-default:#fff;--button-secondary-hover:#cdcdcd;--button-secondary-active:#cdcdcd;--button-secondary-inactive:#f9f9fb;--button-secondary-border-focus:#0085f2;--button-secondary-border-red:#ff97a0;--button-secondary-border-red-focus:#ffd9dc;--icon-primary:#696969;--icon-secondary:#b3b3b3;--icon-information:#0085f2;--icon-warning:#ff2a51;--icon-critical:#d30038;--icon-success:#007936;--accent-primary:#0085f2;--accent-primary-engage:rgba(0, 133, 242, 0.1);--accent-secondary:#0085f2;--accent-tertiary:rgba(0, 133, 242, 0.1);--shadow-01:0px 1px 2px rgba(43, 42, 51, 0.05);--shadow-02:0px 1px 6px rgba(43, 42, 51, 0.1);--focus-01:0px 0px 0px 3px rgba(0, 144, 237, 0.4);--field-focus-border:#0085f2;--code-token-tag:#0069c2;--code-token-punctuation:#9e9e9e;--code-token-attribute-name:#d30038;--code-token-attribute-value:#007936;--code-token-comment:#9e9e9e;--code-token-default:#1b1b1b;--code-token-selector:#872bff;--code-background-inline:#f2f1f1;--code-background-block:#f2f1f1;--notecard-link-color:#343434;--scrollbar-bg:transparent;--scrollbar-color:rgba(0, 0, 0, 0.25);--category-color:#0085f2;--category-color-background:#0085f210;--code-color:#5e9eff;--mark-color:#dce2f2;--plus-accent-color:#d30038;--html-accent-color:#d30038;--css-accent-color:#0069c2;--js-accent-color:#afa100;--http-accent-color:#007936;--apis-accent-color:#872bff;--learn-accent-color:#d00058;--plus-code-color:#0069c2;--html-code-color:#9e0027;--css-code-color:#0069c2;--js-code-color:#746a00;--http-code-color:#007936;--apis-code-color:#872bff;--learn-code-color:#d00058;--plus-mark-color:#ffd9dc;--html-mark-color:#ffd9dc;--css-mark-color:#dce2f2;--js-mark-color:#f0e498;--http-mark-color:#a9f3ba;--apis-mark-color:#e6deff;--learn-mark-color:#ffd9df;--plus-accent-background-color:#ff2a5130;--html-accent-background-color:#ff2a5130;--css-accent-background-color:#0085f230;--js-accent-background-color:#93870030;--http-accent-background-color:#009a4630;--apis-accent-background-color:#9b65ff30;--learn-accent-background-color:#ff1f7230;--plus-accent-engage:rgba(255, 42, 81, 0.7);--html-accent-engage:rgba(255, 42, 81, 0.7);--css-accent-engage:rgba(0, 133, 242, 0.7);--js-accent-engage:rgba(147, 135, 0, 0.7);--http-accent-engage:rgba(0, 154, 70, 0.7);--apis-accent-engage:rgba(155, 101, 255, 0.7);--learn-accent-engage:rgba(255, 31, 114, 0.7);--homepage-hero-bg:radial-gradient(
    114.42% 123.24% at 6.69% 13.67%,
    rgba(51, 178, 252, 0.2) 22.84%,
    rgba(152, 82, 250, 0.2) 47.63%,
    rgba(255, 230, 0, 0.2) 82.74%
  );--homepage-secondary-bg:linear-gradient(
    90deg,
    #8524ff -43.99%,
    #4d7fff 159.52%
  );--modal-backdrop-color:rgba(27, 27, 27, 0.1);--blend-color:#fff80;--text-primary-red:#d30038;--text-primary-green:#007936;--text-primary-blue:#0069c2;--text-primary-yellow:#746a00}.theme-dark{--text-primary:#fff;--text-secondary:#cdcdcd;--text-inactive:#cdcdcda6;--text-link:#8cb4ff;--text-invert:#1b1b1b;--background-primary:#1b1b1b;--background-secondary:#343434;--background-tertiary:#4e4e4e;--background-toc-active:#343434;--background-mark-yellow:rgba(199, 183, 0, 0.4);--border-primary:#858585;--border-secondary:#696969;--button-primary-default:#fff;--button-primary-hover:#cdcdcd;--button-primary-active:#9e9e9e;--button-primary-inactive:#fff;--button-secondary-default:#4e4e4e;--button-secondary-hover:#858585;--button-secondary-active:#9e9e9e;--button-secondary-inactive:#4e4e4e;--icon-primary:#fff;--icon-secondary:#b3b3b3;--icon-information:#5e9eff;--icon-warning:#afa100;--icon-critical:#ff707f;--icon-success:#00b755;--accent-primary:#5e9eff;--accent-primary-engage:rgba(94, 158, 255, 0.1);--accent-secondary:#5e9eff;--shadow-01:0px 1px 2px rgba(251, 251, 254, 0.2);--shadow-02:0px 1px 6px rgba(251, 251, 254, 0.2);--focus-01:0px 0px 0px 3px rgba(251, 251, 254, 0.5);--field-focus-border:#fff;--code-token-tag:#c1cff1;--code-token-punctuation:#9e9e9e;--code-token-attribute-name:#ff97a0;--code-token-attribute-value:#00d061;--code-token-comment:#9e9e9e;--code-token-default:#fff;--code-token-selector:#bea5ff;--code-background-inline:#343434;--code-background-block:#343434;--notecard-link-color:#e2e2e2;--scrollbar-color:rgba(255, 255, 255, 0.25);--category-color:#8cb4ff;--category-color-background:#8cb4ff70;--code-color:#c1cff1;--mark-color:#004d92;--plus-accent-color:#ff97a0;--html-accent-color:#ff707f;--css-accent-color:#8cb4ff;--js-accent-color:#afa100;--http-accent-color:#00b755;--apis-accent-color:#ae8aff;--learn-accent-color:#ff6d91;--plus-code-color:#c1cff1;--html-code-color:#f9f9fb;--css-code-color:#c1cff1;--js-code-color:#c7b700;--http-code-color:#00d061;--apis-code-color:#bea5ff;--learn-code-color:#ff93aa;--plus-mark-color:#9e0027;--html-mark-color:#9e0027;--css-mark-color:#004d92;--js-mark-color:#564e00;--http-mark-color:#005a26;--apis-mark-color:#6800cf;--learn-mark-color:#9e0041;--plus-accent-engage:rgba(255, 112, 127, 0.7);--html-accent-engage:rgba(255, 112, 127, 0.7);--css-accent-engage:rgba(140, 180, 255, 0.7);--js-accent-engage:rgba(175, 161, 0, 0.7);--http-accent-engage:rgba(0, 183, 85, 0.7);--apis-accent-engage:rgba(174, 138, 255, 0.7);--learn-accent-engage:rgba(255, 109, 145, 0.7);--modal-backdrop-color:rgba(27, 27, 27, 0.7);--blend-color:#00080;--text-primary-red:#ff97a0;--text-primary-green:#00d061;--text-primary-blue:#8cb4ff;--text-primary-yellow:#c7b700}@media (prefers-color-scheme:light){:root{--text-primary:#1b1b1b;--text-secondary:#4e4e4e;--text-inactive:#9e9e9ea6;--text-link:#0069c2;--text-invert:#fff;--background-primary:#fff;--background-secondary:#f9f9fb;--background-tertiary:#fff;--background-toc-active:#ebeaea;--background-mark-yellow:rgba(199, 183, 0, 0.4);--background-mark-green:rgba(0, 208, 97, 0.4);--background-information:rgba(0, 133, 242, 0.1);--background-warning:rgba(255, 42, 81, 0.1);--background-critical:rgba(211, 0, 56, 0.1);--background-success:rgba(0, 121, 54, 0.1);--border-primary:#cdcdcd;--border-secondary:#cdcdcd;--button-primary-default:#1b1b1b;--button-primary-hover:#696969;--button-primary-active:#9e9e9e;--button-primary-inactive:#1b1b1b;--button-secondary-default:#fff;--button-secondary-hover:#cdcdcd;--button-secondary-active:#cdcdcd;--button-secondary-inactive:#f9f9fb;--button-secondary-border-focus:#0085f2;--button-secondary-border-red:#ff97a0;--button-secondary-border-red-focus:#ffd9dc;--icon-primary:#696969;--icon-secondary:#b3b3b3;--icon-information:#0085f2;--icon-warning:#ff2a51;--icon-critical:#d30038;--icon-success:#007936;--accent-primary:#0085f2;--accent-primary-engage:rgba(0, 133, 242, 0.1);--accent-secondary:#0085f2;--accent-tertiary:rgba(0, 133, 242, 0.1);--shadow-01:0px 1px 2px rgba(43, 42, 51, 0.05);--shadow-02:0px 1px 6px rgba(43, 42, 51, 0.1);--focus-01:0px 0px 0px 3px rgba(0, 144, 237, 0.4);--field-focus-border:#0085f2;--code-token-tag:#0069c2;--code-token-punctuation:#9e9e9e;--code-token-attribute-name:#d30038;--code-token-attribute-value:#007936;--code-token-comment:#9e9e9e;--code-token-default:#1b1b1b;--code-token-selector:#872bff;--code-background-inline:#f2f1f1;--code-background-block:#f2f1f1;--notecard-link-color:#343434;--scrollbar-bg:transparent;--scrollbar-color:rgba(0, 0, 0, 0.25);--category-color:#0085f2;--category-color-background:#0085f210;--code-color:#5e9eff;--mark-color:#dce2f2;--plus-accent-color:#d30038;--html-accent-color:#d30038;--css-accent-color:#0069c2;--js-accent-color:#afa100;--http-accent-color:#007936;--apis-accent-color:#872bff;--learn-accent-color:#d00058;--plus-code-color:#0069c2;--html-code-color:#9e0027;--css-code-color:#0069c2;--js-code-color:#746a00;--http-code-color:#007936;--apis-code-color:#872bff;--learn-code-color:#d00058;--plus-mark-color:#ffd9dc;--html-mark-color:#ffd9dc;--css-mark-color:#dce2f2;--js-mark-color:#f0e498;--http-mark-color:#a9f3ba;--apis-mark-color:#e6deff;--learn-mark-color:#ffd9df;--plus-accent-background-color:#ff2a5130;--html-accent-background-color:#ff2a5130;--css-accent-background-color:#0085f230;--js-accent-background-color:#93870030;--http-accent-background-color:#009a4630;--apis-accent-background-color:#9b65ff30;--learn-accent-background-color:#ff1f7230;--plus-accent-engage:rgba(255, 42, 81, 0.7);--html-accent-engage:rgba(255, 42, 81, 0.7);--css-accent-engage:rgba(0, 133, 242, 0.7);--js-accent-engage:rgba(147, 135, 0, 0.7);--http-accent-engage:rgba(0, 154, 70, 0.7);--apis-accent-engage:rgba(155, 101, 255, 0.7);--learn-accent-engage:rgba(255, 31, 114, 0.7);--homepage-hero-bg:radial-gradient(
      114.42% 123.24% at 6.69% 13.67%,
      rgba(51, 178, 252, 0.2) 22.84%,
      rgba(152, 82, 250, 0.2) 47.63%,
      rgba(255, 230, 0, 0.2) 82.74%
    );--homepage-secondary-bg:linear-gradient(
      90deg,
      #8524ff -43.99%,
      #4d7fff 159.52%
    );--modal-backdrop-color:rgba(27, 27, 27, 0.1);--blend-color:#fff80;--text-primary-red:#d30038;--text-primary-green:#007936;--text-primary-blue:#0069c2;--text-primary-yellow:#746a00}}@media (prefers-color-scheme:dark){:root{--text-primary:#fff;--text-secondary:#cdcdcd;--text-inactive:#cdcdcda6;--text-link:#8cb4ff;--text-invert:#1b1b1b;--background-primary:#1b1b1b;--background-secondary:#343434;--background-tertiary:#4e4e4e;--background-toc-active:#343434;--background-mark-yellow:rgba(199, 183, 0, 0.4);--border-primary:#858585;--border-secondary:#696969;--button-primary-default:#fff;--button-primary-hover:#cdcdcd;--button-primary-active:#9e9e9e;--button-primary-inactive:#fff;--button-secondary-default:#4e4e4e;--button-secondary-hover:#858585;--button-secondary-active:#9e9e9e;--button-secondary-inactive:#4e4e4e;--icon-primary:#fff;--icon-secondary:#b3b3b3;--icon-information:#5e9eff;--icon-warning:#afa100;--icon-critical:#ff707f;--icon-success:#00b755;--accent-primary:#5e9eff;--accent-primary-engage:rgba(94, 158, 255, 0.1);--accent-secondary:#5e9eff;--shadow-01:0px 1px 2px rgba(251, 251, 254, 0.2);--shadow-02:0px 1px 6px rgba(251, 251, 254, 0.2);--focus-01:0px 0px 0px 3px rgba(251, 251, 254, 0.5);--field-focus-border:#fff;--code-token-tag:#c1cff1;--code-token-punctuation:#9e9e9e;--code-token-attribute-name:#ff97a0;--code-token-attribute-value:#00d061;--code-token-comment:#9e9e9e;--code-token-default:#fff;--code-token-selector:#bea5ff;--code-background-inline:#343434;--code-background-block:#343434;--notecard-link-color:#e2e2e2;--scrollbar-color:rgba(255, 255, 255, 0.25);--category-color:#8cb4ff;--category-color-background:#8cb4ff70;--code-color:#c1cff1;--mark-color:#004d92;--plus-accent-color:#ff97a0;--html-accent-color:#ff707f;--css-accent-color:#8cb4ff;--js-accent-color:#afa100;--http-accent-color:#00b755;--apis-accent-color:#ae8aff;--learn-accent-color:#ff6d91;--plus-code-color:#c1cff1;--html-code-color:#f9f9fb;--css-code-color:#c1cff1;--js-code-color:#c7b700;--http-code-color:#00d061;--apis-code-color:#bea5ff;--learn-code-color:#ff93aa;--plus-mark-color:#9e0027;--html-mark-color:#9e0027;--css-mark-color:#004d92;--js-mark-color:#564e00;--http-mark-color:#005a26;--apis-mark-color:#6800cf;--learn-mark-color:#9e0041;--plus-accent-engage:rgba(255, 112, 127, 0.7);--html-accent-engage:rgba(255, 112, 127, 0.7);--css-accent-engage:rgba(140, 180, 255, 0.7);--js-accent-engage:rgba(175, 161, 0, 0.7);--http-accent-engage:rgba(0, 183, 85, 0.7);--apis-accent-engage:rgba(174, 138, 255, 0.7);--learn-accent-engage:rgba(255, 109, 145, 0.7);--modal-backdrop-color:rgba(27, 27, 27, 0.7);--blend-color:#00080;--text-primary-red:#ff97a0;--text-primary-green:#00d061;--text-primary-blue:#8cb4ff;--text-primary-yellow:#c7b700}}*{box-sizing:border-box}body{color:var(--text-primary);background-color:var(--background-primary);margin:0;padding:0;height:100%;font:var(--type-body-l)}.output-header{margin:0;padding:.5rem 1rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;border-bottom:1px solid var(--border-primary)}.output-header.no-border{border-bottom:0 none}.output-header.full-border{border:1px solid var(--border-primary);border-width:1px 1px 0 1px}.output-heading{margin:0;font:var(--type-body-l)}.reset{background-color:transparent;color:var(--text-primary);font:var(--type-label-s);margin:0;padding:.7em .9em;height:var(--button-height);text-transform:uppercase;letter-spacing:1.5px;border:none;max-width:100px;cursor:pointer;border-radius:var(--button-radius)}.reset:hover{background-color:var(--button-secondary-hover)}.CodeMirror{border:1px solid var(--border-primary);height:280px;background:var(--background-primary)}.CodeMirror-gutters{background:var(--background-secondary);border-right:1px solid var(--border-primary)}.CodeMirror-cursor{border-left:1px solid #fff;border-right:1px solid #000}.user-message{display:none;position:absolute;top:30px;left:50%;background-color:var(--text-secondary);color:var(--background-primary);padding:.5rem;border-radius:var(--elem-radius);font-size:14px;opacity:1;transition:opacity .5s;z-index:4}.fade-in{animation:fadein .5s}.fade-out{animation:fadeout .5s}.hide{opacity:0}.hidden{display:none}.show{display:block}.visually-hidden{position:absolute!important;height:1px;width:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);padding:0;border:0}@media screen and (min-width:47.9375em){header h4{font-size:1.1rem}}@media screen and (min-width:63.9375em){header h4{font-size:1.4rem}}@keyframes fadein{from{opacity:0}to{opacity:1}}@keyframes fadeout{from{opacity:1}to{opacity:0}}@font-face{font-family:'Fira Sans';src:local('FiraSans-Regular'),url('/National_Library/20160517234414oe_/https://interactive-examples.mdn.mozilla.net/media/fonts/FiraSans-Regular.woff2') format('woff2')}@font-face{font-family:'Fira Sans';font-weight:400;font-style:oblique;src:local('FiraSans-SemiBoldItalic'),url('/National_Library/20160517234414oe_/https://interactive-examples.mdn.mozilla.net/media/fonts/FiraSans-SemiBoldItalic.woff2')}@font-face{font-family:'Dancing Script';src:url('/National_Library/20160517234414oe_/https://interactive-examples.mdn.mozilla.net/media/fonts/DancingScript-Regular.ttf')}@font-face{font-family:molot;src:url('/National_Library/20160517234414oe_/https://interactive-examples.mdn.mozilla.net/media/fonts/molot.woff2') format('woff2')}@font-face{font-family:rapscallion;src:url('/National_Library/20160517234414oe_/https://interactive-examples.mdn.mozilla.net/media/fonts/rapscall.woff2') format('woff2')}.tab-list{display:flex;gap:.5rem;padding-top:1rem;background:var(--background-secondary)}button[role=tab]{background-color:transparent;color:var(--text-secondary);padding:.5em 30px;border:0 none;border-bottom:3px solid transparent;font:var(--type-emphasis-m);cursor:pointer}button[role=tab]:focus,button[role=tab]:hover{color:var(--text-primary)}button[aria-selected=true]{color:var(--accent-primary);border-bottom-color:var(--accent-primary)}.editor-container{display:flex;flex-direction:column;overflow:hidden}.tabbed-shorter .CodeMirror{height:252px}.tabbed-standard .CodeMirror{height:322px}.tabbed-taller .CodeMirror{height:532px}.tabbed-shorter .CodeMirror,.tabbed-standard .CodeMirror,.tabbed-taller .CodeMirror{border-right:0 none;border-left:0 none;border-bottom:1px solid var(--border-primary)}.shadow-container{position:relative}.output.style-scope{background-color:var(--background-primary);border-left:1px solid var(--border-primary);font-size:.9rem;height:342px;line-height:1.5;margin:0;overflow:scroll;padding:1rem}.tabs{font-size:.9rem;flex:none}.console-label,.output-label{position:absolute;background-color:var(--background-secondary);color:var(--text-secondary);border-radius:0 0 0 var(--elem-radius);top:0;right:0;margin:0;padding:.5rem 1.6rem;font-size:.9rem;z-index:2;font:var(--type-label-s);text-transform:uppercase}.icon-clear{width:12px;height:12px}.clear{display:flex;gap:.25rem;align-items:center;background-color:var(--button-secondary-default);color:var(--text-primary);padding:.5em;margin-bottom:.5rem;border:1px solid var(--border-primary);border-radius:var(--elem-radius);font:var(--type-emphasis-m);cursor:pointer}.clear:hover{background-color:var(--button-secondary-hover)}.console-container{position:relative;border-top:1px solid var(--border-primary);padding-top:.5rem}.console-label{position:absolute;top:3rem;right:1px;border-radius:var(--elem-radius)}.console{position:relative;height:200px;background-color:var(--background-secondary);margin:0;padding:2rem .5rem .5rem .5rem;border:1px solid var(--border-primary);border-radius:var(--elem-radius);width:100%;height:200px;font:var(--type-code-regular)}.console code{display:block;width:100%;height:100px;white-space:pre;word-break:break-word;overflow-y:auto}@media screen and (min-width:590px){.editor-container{flex-direction:row}.console{padding-top:.5rem}.tabs{width:60%}.tabbed-shorter{height:300px}.tabbed-standard{height:370px}.tabbed-taller{height:580px}.shadow-container{width:40%;height:100%;border-left:1px solid var(--border-primary)}.tabbed-shorter .CodeMirror,.tabbed-standard .CodeMirror,.tabbed-taller .CodeMirror{border-bottom:0 none}}