CINXE.COM
AMP Playground
<html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width"><title>AMP Playground</title><link rel="shortcut icon" href="/static/img/favicon.png"><meta name="msapplication-tap-highlight" content="no"><link rel="manifest" href="/manifest.json"><meta name="mobile-web-app-capable" content="yes"><meta name="application-name" content="AMP Playground"><link rel="icon" sizes="192x192" href="images/icons/icon-192x192.png"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="white"><meta name="apple-mobile-web-app-title" content="AMP Playground"><link rel="apple-touch-icon" href="images/icons/icon-192x192.png"><meta name="msapplication-TileImage" content="images/icons/icon-144x144.png"><meta name="msapplication-TileColor" content="#ffffff"><meta http-equiv="origin-trial" content="AviuuiVhVdQ3GpVtxSpyMT+XsL/qGGYmyiyLvYSKPL3rRDLipe/ard5x+DXVlrATtolwX75VtpSKc9IEzLDd4AkAAABmeyJvcmlnaW4iOiJodHRwczovL2FtcC5kZXY6NDQzIiwiZmVhdHVyZSI6IkV4cGVyaW1lbnRhbEF1dG9wbGF5RHluYW1pY0RlbGVnYXRpb24iLCJleHBpcnkiOjE1NzA1Nzg0NDF9"><meta name="theme-color" content="#ffffff"><script async src="https://www.googletagmanager.com/gtag/js?id=G-TYM9BH1XCX"></script><script>"use strict";(self.webpackChunk=self.webpackChunk||[]).push([[424],{775:function(){},5659:function(){},9352:function(){},2733:function(){},4323:function(){}}]);</script><script defer="defer" src="main.27e1af3776f5cba8bca3.js"></script><style>@font-face{font-family:system;font-style:normal;font-weight:300;src:local(".SFNSText-Light"),local(".HelveticaNeueDeskInterface-Light"),local(".LucidaGrandeUI"),local("Ubuntu Light"),local("Segoe UI Light"),local("Roboto-Light"),local("DroidSans"),local("Tahoma")}@font-face{font-family:system;font-style:italic;font-weight:300;src:local(".SFNSText-LightItalic"),local(".HelveticaNeueDeskInterface-Italic"),local(".LucidaGrandeUI"),local("Ubuntu Light Italic"),local("Segoe UI Light Italic"),local("Roboto-LightItalic"),local("DroidSans"),local("Tahoma")}@font-face{font-family:system;font-style:normal;font-weight:400;src:local(".SFNSText-Regular"),local(".HelveticaNeueDeskInterface-Regular"),local(".LucidaGrandeUI"),local("Ubuntu"),local("Segoe UI"),local("Roboto-Regular"),local("DroidSans"),local("Tahoma")}@font-face{font-family:system;font-style:italic;font-weight:400;src:local(".SFNSText-Italic"),local(".HelveticaNeueDeskInterface-Italic"),local(".LucidaGrandeUI"),local("Ubuntu Italic"),local("Segoe UI Italic"),local("Roboto-Italic"),local("DroidSans"),local("Tahoma")}@font-face{font-family:system;font-style:normal;font-weight:500;src:local(".SFNSText-Medium"),local(".HelveticaNeueDeskInterface-MediumP4"),local(".LucidaGrandeUI"),local("Ubuntu Medium"),local("Segoe UI Semibold"),local("Roboto-Medium"),local("DroidSans-Bold"),local("Tahoma Bold")}@font-face{font-family:system;font-style:italic;font-weight:500;src:local(".SFNSText-MediumItalic"),local(".HelveticaNeueDeskInterface-MediumItalicP4"),local(".LucidaGrandeUI"),local("Ubuntu Medium Italic"),local("Segoe UI Semibold Italic"),local("Roboto-MediumItalic"),local("DroidSans-Bold"),local("Tahoma Bold")}@font-face{font-family:system;font-style:normal;font-weight:700;src:local(".SFNSText-Bold"),local(".HelveticaNeueDeskInterface-Bold"),local(".LucidaGrandeUI"),local("Ubuntu Bold"),local("Roboto-Bold"),local("DroidSans-Bold"),local("Segoe UI Bold"),local("Tahoma Bold")}@font-face{font-family:system;font-style:italic;font-weight:700;src:local(".SFNSText-BoldItalic"),local(".HelveticaNeueDeskInterface-BoldItalic"),local(".LucidaGrandeUI"),local("Ubuntu Bold Italic"),local("Roboto-BoldItalic"),local("DroidSans-Bold"),local("Segoe UI Bold Italic"),local("Tahoma Bold")}@font-face{font-display:optional;font-family:Noto Sans;font-style:normal;font-weight:400;src:local("Noto Sans"),local("NotoSans"),url(https://amp.dev/static/fonts/noto-sans-v7-latin-regular.woff2) format("woff2"),url(https://amp.dev/static/fonts/noto-sans-v7-latin-regular.woff) format("woff")}@font-face{font-display:optional;font-family:Noto Sans;font-style:normal;font-weight:700;src:local("Noto Sans Bold"),local("NotoSans-Bold"),url(https://amp.dev/static/fonts/noto-sans-v7-latin-700.woff2) format("woff2"),url(https://amp.dev/static/fonts/noto-sans-v7-latin-700.woff) format("woff")}@font-face{font-display:optional;font-family:Poppins;font-style:normal;font-weight:700;src:local("Poppins Bold"),local("Poppins-Bold"),url(https://amp.dev/static/fonts/poppins-v5-latin-700.woff2) format("woff2"),url(https://amp.dev/static/fonts/poppins-v5-latin-700.woff) format("woff")}@font-face{font-display:optional;font-family:Fira Mono;font-style:normal;font-weight:400;src:local("Fira Mono"),local("FiraMono"),url(https://amp.dev/static/fonts/fira-mono-v7-latin-500.woff2) format("woff2"),url(https://amp.dev/static/fonts/fira-mono-v7-latin-500.woff) format("woff")}body,html{background-color:#fff;color:#48525c;font-family:Noto Sans,system;font-size:16px;margin:0;min-width:240px;overflow-x:hidden;padding:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;touch-action:manipulation}@media(max-width:240px){body,html{font-size:14px}}body>*>:not(.ap-o-code-preview)>*>.amp-carousel-button{background-color:#fff;background-position:50% 50%;background-repeat:no-repeat;border-radius:50%;border-style:none;box-shadow:0 10px 15px 0 rgba(0,0,0,.4);box-sizing:border-box;height:3em;margin:1em;pointer-events:all;position:relative;transition:.4s;width:3em;z-index:10}body>*>:not(.ap-o-code-preview)>*>.amp-carousel-button-prev{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%23005AF0'%3E%3Cpath d='M15 8.25H5.87l4.19-4.19L9 3 3 9l6 6 1.06-1.06-4.19-4.19H15z'/%3E%3C/svg%3E")}body>*>:not(.ap-o-code-preview)>*>.amp-carousel-button-next{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%23005AF0'%3E%3Cpath d='M9 3 7.94 4.06l4.19 4.19H3v1.5h9.13l-4.19 4.19L9 15l6-6z'/%3E%3C/svg%3E")}body>*>:not(.ap-o-code-preview)>*>.amp-carousel-button:hover{background-color:#fff;box-shadow:0 20px 30px 0 rgba(0,0,0,.2);cursor:pointer}:target:before{content:"";display:block;height:120px;margin-top:-120px;visibility:hidden}@media(min-width:1024px){h1:target:before{height:75px;margin-top:-75px}h2:target:before{height:81px;margin-top:-81px}h3:target:before{height:87px;margin-top:-87px}h4:target:before{height:90px;margin-top:-90px}h5:target:before{height:93px;margin-top:-93px}h6:target:before{height:97px;margin-top:-97px}}a{color:#005af0;font-weight:700;text-decoration:none}a code{background-color:#e2e5e6;color:#000;color:#005af0;display:inline;font-family:Fira Mono,monospace;font-size:.9em;font-weight:500;padding:2px 4px;word-break:normal}@keyframes rotate{to{transform:rotate(1turn)}}:root{--header-height:56px;--gradient-1:linear-gradient(225deg,#29323c,#485563 75%)}*{box-sizing:border-box;-webkit-tap-highlight-color:rgba(255,255,255,0)}.elevation-2dp{box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12)}.elevation-4dp{box-shadow:0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12)}.elevation-8dp{box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12)}.hidden{display:none;visibility:hidden}.underline{text-decoration:underline #005af0!important;text-underline-position:under!important}.border{border:1px solid #005af0!important}.uppercase{font-weight:700;text-transform:uppercase}.ap-o-header{align-items:center;background-color:#fff;box-shadow:0 2px 10px 0 rgba(0,0,0,.07);display:flex;flex-direction:row;font-family:Poppins,system;font-weight:700;height:var(--header-height);justify-content:space-between;margin:0 auto;padding:0 2rem;position:sticky;top:0;width:100%;z-index:10}.ap-o-header-text{color:#000;font-size:1.125rem;margin-left:.5rem}.ap-o-header-icon-text{color:#005af0}.ap-o-header-icon{align-items:center;display:flex;margin:10px 0 10px 30px}.ap-o-header-icon svg{box-sizing:initial;display:flex;font-size:medium;justify-content:center;fill:#005af0;filter:drop-shadow(0 30px 30px -15px rgba(0,0,0,.25));height:30px;margin-right:6px;width:30px}.ap-o-header #document-title{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 24 24'%3E%3Cpath fill='%23005AF0' d='M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z'/%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3C/svg%3E");cursor:pointer;margin-left:auto;max-width:400px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ap-o-header #toolbar{align-items:center;display:flex;justify-content:flex-end;margin-left:auto}.ap-o-header #toolbar>*{margin:0 8px}.panel{overflow:hidden;width:calc(50% - 12px);z-index:1}.panel .panel-header{align-items:center;display:flex;height:48px;position:relative;width:100%}.panel .panel-header *{border-radius:0;font-family:Poppins,system;font-size:14px;font-weight:700}.panel .panel-header>*{align-items:center;cursor:pointer;display:flex;height:100%}.panel .panel-header select{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 24 24'%3E%3Cpath d='M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z'/%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3C/svg%3E");border-radius:0;cursor:pointer;height:100%;padding:16px 36px 16px 16px}.panel .panel-header .button{height:48px;white-space:nowrap}@media(min-width:786px){.panel .panel-header .button{padding:0 15px}}.panel .panel-header .button.square{width:48px}.panel .panel-header .button[disabled]{display:none}.panel .panel-header .button svg{margin-left:5px}.panel .panel-header .button span{display:none}@media(min-width:786px){.panel .panel-header .button span{display:inline}}.panel .panel-header svg{height:100%}.panel .panel-header #preview-header-refresh svg{height:36px;margin:8px 0;width:36px}.panel--dark{display:flex;flex-direction:column;margin-left:8px;min-width:300px;position:relative}.panel--dark .panel-header{background:var(--gradient-1)}.panel--dark .panel-header *{color:#fff}.panel--dark .panel-header>*{border-left:1px solid hsla(0,0%,100%,.2)}.panel--dark .panel-header>:first-child{border-right:1px solid hsla(0,0%,100%,.2);margin-right:auto}.panel--dark .panel-header select{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 24 24'%3E%3Cpath fill='%23FFF' d='M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z'/%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3C/svg%3E")}.panel--dark .panel-header .button:active,.panel--dark .panel-header .button:hover,.panel--dark .panel-header select:active,.panel--dark .panel-header select:hover{background-color:#29323c}.panel--dark .panel-header #error-indicator{border:0;border-radius:24px;height:28px;line-height:1;margin:auto 12px auto auto;padding:0 15px}.panel--dark .panel-header #error-indicator span{display:none}@media(min-width:768px){.panel--dark .panel-header #error-indicator span{display:inline;margin-left:4px}}.panel--dark .panel-header #error-indicator[disabled]{display:none}.panel--dark .panel-header #error-indicator.valid{background:#09a600;display:none}@media(min-width:768px){.panel--dark .panel-header #error-indicator.valid{display:block}}.panel--dark .panel-header #error-indicator.warning{background:#ffdc00}.panel--dark .panel-header #error-indicator.error{background:#c80000}@media(min-width:786px){.panel--light .panel-header>*{border-right:1px solid rgba(0,0,0,.15)}.panel--light .panel-header>:last-child{border-left:1px solid rgba(0,0,0,.15);border-right:0;margin-left:auto}}.panel--light .panel-header .button:active,.panel--light .panel-header .button:hover,.panel--light .panel-header select:active,.panel--light .panel-header select:hover{background-color:rgba(0,0,0,.02)}.panel--light .panel-header svg{fill:#20202a}.flex-right{margin-left:auto}.hidden{display:none!important}.button{-webkit-appearance:none;background:transparent;border:none;border-radius:2px;-webkit-box-sizing:border-box;box-sizing:border-box;color:#48525c;color:rgba(0,0,0,.87);display:inline-block;font-family:var(--font-family-serif);font-size:16px;font-weight:400;font-weight:500;height:32px;line-height:1.6rem;line-height:1.5rem;line-height:32px;outline:none;overflow:hidden;padding:0 8px;position:relative;text-align:center;text-decoration:none;text-transform:uppercase;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle;-webkit-tap-highlight-color:rgba(0,0,0,.18)}.button:hover:not([disabled]){cursor:pointer}.button:active:not([disabled]),.button:hover:not([disabled]){background-color:var(--dark-bg-color);outline:none}.panel-header select{-webkit-appearance:none;-moz-appearance:none;background-color:transparent;border:none;border-radius:4px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;display:inline-block;font:inherit;line-height:1em;margin:0;padding:.5em 1.5em .5em 0}.panel-header select.minimal{background-image:linear-gradient(45deg,transparent 50%,gray 0),linear-gradient(135deg,gray 50%,transparent 0);background-position:calc(100% - 10px) calc(.75em + 2px),calc(100% - 5px) calc(.75em + 2px)}.panel-header select.minimal,.panel-header select.minimal:focus{background-repeat:no-repeat;background-size:5px 5px,5px 5px,1px 1.5em}.panel-header select.minimal:focus{background-image:linear-gradient(45deg,green 50%,transparent 0),linear-gradient(135deg,transparent 50%,green 0);background-position:calc(100% - 5px) 1em,calc(100% - 10px) 1em;border-color:green;outline:0}.panel-header select:-moz-focusring{color:transparent;text-shadow:0 0 0 #000}main{background-image:linear-gradient(26deg,hsla(0,0%,100%,0) 5%,#ededf1 91%);display:flex;left:0;padding:8px 0;top:var(--header-height)}main,main:after{bottom:0;position:absolute;right:0}main:after{background:#fff;clip-path:polygon(0 100%,100% 100%,100% 0);content:"";height:70%;width:17%}main>.panel+.panel{margin-left:8px}#drag{cursor:col-resize;height:100%;width:8px}#source #gutters{left:0;margin-bottom:-30px;min-height:100%;position:absolute;top:0;white-space:nowrap;width:38px}#bottom-navigation{display:none}#preview{position:relative;z-index:10}#preview-header-close{display:none}#show-menu{height:32px;padding:4px}.caret-right{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 24 24'%3E%3Cpath fill='%23005AF0' d='M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z'/%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3C/svg%3E");background-position-x:100%;background-position-y:50%;background-repeat:no-repeat;padding-right:36px}.noselect{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.fadein{animation:fadein .5s cubic-bezier(.4,0,.2,1),height .28s cubic-bezier(.4,0,.2,1);animation-fill-mode:forwards}.fadeout{animation:fadeout .5s cubic-bezier(.4,0,.2,1),height .28s cubic-bezier(.4,0,.2,1);animation-fill-mode:forwards}#fork-document,#save-document{display:none!important}@keyframes fadein{0%{opacity:0}to{opacity:1}}@keyframes fadeout{0%{opacity:1}to{opacity:0}}.hide-on-desktop{display:none}@media(max-width:767px){.hide-on-desktop{display:block}.hide-on-mobile{display:none!important}.ap-o-header{padding:0 8px}.ap-o-header #document-title{margin-left:8px}#toolbar>*{margin:0}#drag{display:none}header #logo{margin-left:1rem}main{display:block;padding:0}.panel,main{position:absolute}.panel{height:100%;left:0;top:0;width:100%}#source{margin-left:0}#preview{background:#fff;pointer-events:none;position:fixed;transform:translateY(100%);transition:transform .2s cubic-bezier(0,0,.3,1)}#preview.show{pointer-events:auto;transform:translateY(0);z-index:1000}#preview.hide{transform:translateY(100%)}}.embed header{display:none}.embed main{height:100%;overflow:hidden;padding:0;position:relative;top:0;width:100%}.embed main.elevation-2dp{box-shadow:none;padding:0}.embed #drag,.embed .panel .panel-header{display:none}.embed #previewIframe{border:none;bottom:0;height:0;left:0;margin:auto;max-height:100%;max-width:100%;min-height:100%;min-width:100%;position:absolute;right:0;top:0;width:0;z-index:1000}.embed #preview .panel-header{display:none}.embed #preview{bottom:0;height:auto;left:70%;margin:auto;position:absolute;right:3rem;top:0;width:auto}.embed #preview .preview-sizer{padding-top:177.78%}.embed #source{height:100%;margin-left:0;width:100%}.embed .panel{box-shadow:none!important;width:calc(50% - 4px)}.embed .cm-s-monokai.CodeMirror,.embed .cm-s-monokai.CodeMirror pre{font-size:1em;line-height:1.25em}.embed .fab{bottom:16px;right:16px}@media(min-width:768px){.embed #preview-container{height:auto;width:auto}}@media(max-width:767px){.embed .panel{width:100vw}.embed #preview-container{height:100%;max-height:100%;max-width:100%;min-height:100%;min-width:100%;position:fixed;width:100%}.embed #preview,.embed #preview-container{bottom:0;left:0;right:0;top:0}.embed #preview .preview-sizer{display:none}}.validator main{flex-direction:row-reverse;margin-left:0}@media(min-width:768px){.validator main{margin-right:8px}}.validator main:after{background:linear-gradient(225deg,#00dcc0,#005af0 75%);bottom:auto;clip-path:polygon(100% 0,0 0,0 100%);height:25%;left:0;max-width:175px;right:auto;top:0;width:20%}@media(min-width:768px){.validator main:after{height:30%;width:20%}}@media(max-width:767px){.validator #source{display:none}}.validator #validation{overflow-y:auto;padding:55px 20px}@media(min-width:786px){.validator #validation{padding:55px 5px 55px 55px}}@media(min-width:1000px){.validator #validation{padding:55px}}@media(min-width:1920px){.validator #validation{margin:0 auto;max-width:920px;padding:55px 150px}}.validator h1{color:#20202a;display:block;font-family:Poppins,system;font-size:32px;font-weight:700;line-height:1.25em;margin-top:1em}.validator .error-list{height:auto;transition:opacity .3s ease}.validator .error-list-empty{display:none!important}.validator #import-view{margin-bottom:40px}.loader{pointer-events:none}.loader:after{animation:rotate 1.5s linear infinite;border:3px solid #e2e5e6;border-left-color:transparent;border-radius:50%;content:"";display:block;height:45px;margin:100px auto auto;padding:1px;width:45px}.loader{left:50%;position:absolute;top:40%;transform:translateX(-50%) translateY(-50%);transform-origin:50% 50%;z-index:10}.loader .fadeout{animation:fadeout .25s ease-out;animation-fill-mode:forwards}#preview-container{-webkit-overflow-scrolling:touch;background-color:var(--light-bg-color);height:calc(100vh - 96px);overflow-y:auto;overflow-y:scroll;position:relative;width:100%}#previewIframe{background-color:#fff;bottom:0;box-shadow:0 20px 50px 0 rgba(0,0,0,.2);height:100%;left:0;margin:auto;max-height:100%;max-width:100%;opacity:1;overflow-x:hidden;position:absolute;right:0;top:0;transition:width .28s cubic-bezier(.4,0,.2,1),height .28s cubic-bezier(.4,0,.2,1);width:100%}#preview-header{display:none}#preview-custom-dimension{align-items:center;display:flex;justify-content:center;padding:16px}#preview-custom-dimension input{-webkit-appearance:none;background-color:#dfdfdf;border:none;border-radius:4px;font-size:1rem;margin:0 8px;text-align:center;width:48px}#preview-custom-dimension input.invalid{background:color("guardsman-red");margin:0 8px;text-align:center;width:48px}@media(max-width:767px){#preview-size{display:none}#preview-container{height:calc(100vh - 56px);position:relative;top:56px}#preview .panel-header{align-items:center;border-bottom:2px solid color("iron");display:flex;height:54px;justify-content:space-between;margin-left:0;padding-left:0;position:fixed;top:0;width:100%;z-index:10}#preview-header-close{align-items:center;display:flex;font-size:24px;height:56px;justify-content:center;line-height:54px;margin-right:auto;padding:8px;user-select:none;width:56px}#preview-header-close:active{background-color:color("iron")}#preview-header-close:active,#preview-header-close:focus{outline:none}}</style><link href="main.a2b72dcee7437aabf690.css" rel="stylesheet"><link as="script" href="main.27e1af3776f5cba8bca3.js" rel="preload"><link as="style" href="main.a2b72dcee7437aabf690.css" rel="preload"></head><body class=""><header class="ap-o-header"><a class="ap-o-header-icon hide-on-mobile" href="."><svg viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M0 15c0 8.284 6.716 15 15 15 8.285 0 15-6.716 15-15 0-8.284-6.715-15-15-15C6.716 0 0 6.716 0 15z" fill="#FFF"/><path d="M13.85 24.098h-1.14l1.128-6.823-3.49.005h-.05a.57.57 0 01-.568-.569c0-.135.125-.363.125-.363l6.272-10.46 1.16.005-1.156 6.834 3.508-.004h.056c.314 0 .569.254.569.568 0 .128-.05.24-.121.335L13.85 24.098zM15 0C6.716 0 0 6.716 0 15c0 8.284 6.716 15 15 15 8.285 0 15-6.716 15-15 0-8.284-6.715-15-15-15z" fill="#005AF0" fill-rule="nonzero"/></g></svg> <span class="ap-o-header-text ap-o-header-icon-text uppercase">AMP</span> <span class="ap-o-header-text ap-o-header-uppercase">Playground</span></a><div id="document-title" tabindex="0" role="button" class="ap-o-header-text caret-right hidden">Untitled</div><div id="toolbar"><button id="save-document" class="button hidden underline hide-on-mobile">Save</button> <button id="fork-document" class="button border hide-on-mobile">Fork</button><div id="show-menu" class="hide-on-desktop button" tabindex="0" role="button" aria-label="Show Menu"><svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg></div><a class="uppercase hide-on-mobile caret-right" href="https://amp.dev">amp.dev</a></div></header><main><section id="source" class="panel panel--dark active"><div class="panel-header"><div id="runtime-select"></div><button id="error-indicator" class="button" disabled="disabled">Valid</button> <button id="share-toggle" class="button">Share</button> <button id="import-toggle" class="button hide-on-mobile">Import</button> <button id="format-source" class="button" aria-label="format source code">Format</button></div><aside class="loader"></aside></section><div id="drag"></div><section id="preview" class="panel panel--light"><aside class="loader"></aside><div class="panel-header"><div id="preview-header-close" class="button" aria-label="close preview" title="close preview" tabindex="0" role="button">✕</div><div id="preview-header-state" class="button" aria-label="toggle state" title="toggle state" tabindex="0" role="button" disabled="disabled"><span>State</span> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35 22" width="35" height="22"><path d="M6.696 21.204v-.234c-.696-.288-1.275-.804-1.737-1.548-.462-.744-.693-1.686-.693-2.826 0-.492.06-1.122.18-1.89a9.688 9.688 0 00.162-1.62c0-1.392-.666-2.214-1.998-2.466v-.036c.684-.132 1.188-.405 1.512-.819.324-.414.486-.969.486-1.665 0-.444-.054-.99-.162-1.638-.12-.744-.18-1.362-.18-1.854 0-1.14.231-2.082.693-2.826C5.421 1.038 6 .522 6.696.234V0h-2.88c-.3.144-.63.393-.99.747s-.681.864-.963 1.53c-.282.666-.423 1.467-.423 2.403 0 .468.06 1.086.18 1.854.108.648.162 1.2.162 1.656 0 1.116-.594 1.74-1.782 1.872v1.08c.648.06 1.107.267 1.377.621s.405.771.405 1.251c0 .456-.054 1.008-.162 1.656-.12.768-.18 1.386-.18 1.854 0 .936.141 1.737.423 2.403.282.666.603 1.176.963 1.53.36.354.69.603.99.747h2.88zm12.276-3.906V14.22h-3.186v3.078h3.186zm4.356 0V14.22h-3.186v3.078h3.186zm-8.73 0V14.22h-3.186v3.078h3.186zm16.416 3.906c.3-.144.63-.393.99-.747s.681-.864.963-1.53c.282-.666.423-1.467.423-2.403 0-.468-.06-1.086-.18-1.854-.12-.72-.18-1.272-.18-1.656 0-.492.141-.924.423-1.296.282-.372.741-.564 1.377-.576v-1.08c-.636-.024-1.095-.219-1.377-.585a2.048 2.048 0 01-.423-1.287c0-.384.06-.936.18-1.656.12-.768.18-1.386.18-1.854 0-.936-.141-1.737-.423-2.403-.282-.666-.603-1.176-.963-1.53-.36-.354-.69-.603-.99-.747h-2.88v.234c.432.18.834.492 1.206.936.372.444.669.987.891 1.629a6.32 6.32 0 01.333 2.079c0 .492-.06 1.11-.18 1.854a10.252 10.252 0 00-.162 1.638c0 .612.162 1.101.486 1.467.324.366.828.615 1.512.747v.036c-1.332.252-1.998.984-1.998 2.196 0 .456.054.996.162 1.62.12.768.18 1.398.18 1.89a6.32 6.32 0 01-.333 2.079c-.222.642-.519 1.185-.891 1.629-.372.444-.774.756-1.206.936v.234h2.88z"/></svg></div><div id="preview-header-experiments" class="button" aria-label="toggle experiments" title="toggle experiments" tabindex="0" role="button"><span>Experiments</span> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23 25" width="23" height="25"><path fill="#20202A" d="M22.393 18.795L16.068 8.393a1.7 1.7 0 01-.211-.825V2.511h.281c.668 0 1.23-.538 1.23-1.256 0-.681-.562-1.255-1.23-1.255H6.862c-.668 0-1.23.574-1.23 1.255 0 .682.562 1.256 1.23 1.256h.281v5.093c0 .287-.07.574-.21.825L.606 18.831a4.059 4.059 0 00-.104 4.089C1.205 24.21 2.505 25 3.945 25h15.11c1.44 0 2.74-.79 3.443-2.08.703-1.327.668-2.834-.105-4.125zM13.397 2.51v5.093c0 .753.211 1.47.598 2.116l1.335 2.224a7.84 7.84 0 01-2.143-.538 10.778 10.778 0 00-4.78-.753l.563-.933a4.086 4.086 0 00.597-2.116V2.511h3.83zm6.958 19.19a1.503 1.503 0 01-1.336.788H3.91a1.502 1.502 0 01-1.335-.789c-.21-.502-.21-1.112.105-1.578l3.971-6.492c1.757-.718 3.725-.682 5.727.107 1.336.503 2.636.79 3.936.79.21 0 .386-.036.597-.036l3.409 5.631c.316.466.316 1.076.035 1.578z"/></svg></div><div id="preview-header-refresh" class="button" aria-label="refresh preview" title="refresh preview" tabindex="0" role="button"><svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/><path d="M0 0h24v24H0z" fill="none"/></svg></div></div><div id="preview-container"><div class="preview-sizer"></div><iframe frameborder="0" id="previewIframe" title="AMP Playground Output" class="fadein" style="width: 375px; height: 667px;"></iframe></div></section></main><div id="error-list" class="fly-in fly-in--right fly-in--error" data-title="Validation errors"></div><div id="share-view" class="fly-in fly-in--left fly-in--share fly-in--lightbox" data-title="Share"></div><div id="state-view" class="fly-in fly-in--left fly-in--state fly-in--lightbox" data-title="AMP State"></div><div id="import-view" class="fly-in fly-in--left fly-in--import fly-in--lightbox" data-title="Import"></div><div id="experiments-view" class="fly-in fly-in--left fly-in--experiments fly-in--lightbox" data-title="Experiments"></div><div id="fly-in-background"></div></body></html>