[{"data":1,"prerenderedAt":92},["ShallowReactive",2],{"room:14-material":3},{"path":4,"meta":5,"html":81,"css":82,"snippets":83},"14-material",{"id":6,"slug":4,"title":7,"years":8,"summary":9,"context":10,"traits":14,"tech":39,"thenVsNow":45,"snippets":46,"sources":63,"cta":76,"recreated":79},"14","Material Design","2014–2019","Google asked what digital paper would be like if it obeyed light and physics: sheets at measured heights casting real shadows, ink that spread from your fingertip, and a single bold accent colour on a floating button.",{"screens":11,"connection":12,"browsers":13},"360–412 dp Android phones at 2–3× density; tablets and Chromebooks with the same layouts","4G LTE in most cities; Wi-Fi at home; apps cached offline","Chrome for Android, Chrome desktop, Android WebView; Polymer and Angular Material on the web",[15,18,21,24,27,30,33,36],{"id":16,"label":17},"appbar","Coloured app bar sitting at 4dp",{"id":19,"label":20},"elevation","Elevation in dp, drawn with a key and an ambient shadow",{"id":22,"label":23},"ripple","Ink ripples spreading from the touch point",{"id":25,"label":26},"fab","Floating action button that opens a speed dial and morphs into a dialog",{"id":28,"label":29},"snackbar","Snackbar with a single action (\"Undo\")",{"id":31,"label":32},"fields","Floating-label text fields with an animated underline",{"id":34,"label":35},"tabs","Fixed tabs with an accent ink bar",{"id":37,"label":38},"palette","Primary + accent palette (Teal 800 and Pink A200)",[40,41,42,43,44],"Layered box-shadows tuned per dp level (the umbra, penumbra and ambient values Material shipped)","Roboto, the standard curve cubic-bezier(0.4, 0, 0.2, 1) and an 8 dp baseline grid","Ripples injected under the pointer with a scaling, fading circle","Polymer paper-elements, then Materialize, Material Design Lite and Angular Material on the web","Here: CSS-only radio tabs, \u003Cdialog>.showModal() and a placeholder-shown trick for floating labels","Material You (2021) swapped hard paper and big shadows for tonal surfaces and dynamic colour; the ripple and the FAB are still everywhere.",[47,52,56,59],{"file":48,"lang":49,"caption":50,"region":51},"era.css","css","Elevation levels as layered shadows","shadows",{"file":53,"lang":54,"caption":55,"region":22},"era.client.ts","typescript","An ink ripple from the pointer",{"file":48,"lang":49,"caption":57,"region":58},"A floating label without JavaScript","field",{"file":60,"lang":61,"caption":62,"region":25},"demo.html","html","The FAB and its speed dial",[64,67,70,73],{"label":65,"url":66},"Material Design (Wikipedia)","https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FMaterial_Design",{"label":68,"url":69},"Material Design 2014 guidelines, archived at material.io","https:\u002F\u002Fm1.material.io\u002F",{"label":71,"url":72},"Material Design 2 guidelines: Elevation","https:\u002F\u002Fm2.material.io\u002Fdesign\u002Fenvironment\u002Felevation.html",{"label":74,"url":75},"The \u003Cdialog> element (MDN)","https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FHTML\u002FElement\u002Fdialog",{"next":77,"prev":78},"Next era","Back",[80],"Touch ripples and the FAB-to-dialog morph are approximated with CSS animations on a desktop pointer.","\u003Cdiv class=\"md\" data-trait=\"palette\">\n  \u003Cdiv class=\"md__status\" aria-hidden=\"true\">\u003Cspan>Pocket Garden\u003C\u002Fspan>\u003Cspan>▾ ▴ ◢ 87% 9:41\u003C\u002Fspan>\u003C\u002Fdiv>\n\n  \u003Cheader class=\"md__appbar\" data-trait=\"appbar\">\n    \u003Cbutton class=\"md__icon-btn ripple\" type=\"button\" aria-label=\"Open navigation drawer\">\n      \u003Csvg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\u003Cpath d=\"M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z\"\u002F>\u003C\u002Fsvg>\n    \u003C\u002Fbutton>\n    \u003Ch1 class=\"md__title\">Pocket Garden\u003C\u002Fh1>\n    \u003Cbutton class=\"md__icon-btn ripple\" type=\"button\" aria-label=\"Search plants\">\n      \u003Csvg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\u003Cpath d=\"M15.5 14h-.79l-.28-.27A6.47 6.47 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z\"\u002F>\u003C\u002Fsvg>\n    \u003C\u002Fbutton>\n    \u003Cbutton class=\"md__icon-btn ripple\" type=\"button\" aria-label=\"More options\">\n      \u003Csvg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\u003Cpath d=\"M12 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm0 2a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm0 6a2 2 0 1 0 0 4 2 2 0 0 0 0-4z\"\u002F>\u003C\u002Fsvg>\n    \u003C\u002Fbutton>\n\u003Cp class=\"era-stamp\">\u003Cspan class=\"era-stamp__no\">Era 14\u002F17\u003C\u002Fspan> \u003Cspan class=\"era-stamp__years\">2014–2019\u003C\u002Fspan> \u003Cspan class=\"era-stamp__title\">Material Design\u003C\u002Fspan>\u003C\u002Fp>\n  \u003C\u002Fheader>\n\n  \u003Cdiv class=\"md__tabs\" data-trait=\"tabs\">\n    \u003Cinput type=\"radio\" name=\"md-tab\" id=\"md-tab-plants\" checked>\n    \u003Cinput type=\"radio\" name=\"md-tab\" id=\"md-tab-today\">\n    \u003Cinput type=\"radio\" name=\"md-tab\" id=\"md-tab-paper\">\n    \u003Cdiv class=\"md__tablist\" role=\"presentation\">\n      \u003Clabel for=\"md-tab-plants\" class=\"ripple\">My plants\u003C\u002Flabel>\n      \u003Clabel for=\"md-tab-today\" class=\"ripple\">Today\u003C\u002Flabel>\n      \u003Clabel for=\"md-tab-paper\" class=\"ripple\">Paper\u003C\u002Flabel>\n      \u003Cspan class=\"md__ink\" aria-hidden=\"true\">\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n\n    \u003Cdiv class=\"md__panels\">\n      \u003Csection class=\"md__card md__travel\" aria-labelledby=\"md-h-travel\">\n        \u003Ch2 id=\"md-h-travel\" class=\"md__card-title\">Keep exploring\u003C\u002Fh2>\n        \u003Cp class=\"md__card-sub\">Paper and ink were one chapter. Swipe on through time.\u003C\u002Fp>\n\u003Cnav class=\"era-cta\" aria-label=\"Travel through time\">\u003Ca class=\"era-cta__next\" rel=\"next\" href=\"\u002Feras\u002F15-brutalism\u002F\">\u003Cspan class=\"era-cta__label\">Next era\u003C\u002Fspan> \u003Cspan class=\"era-cta__to\">2016–2024 · Brutalism & neubrutalism\u003C\u002Fspan>\u003C\u002Fa> \u003Ca class=\"era-cta__prev\" rel=\"prev\" href=\"\u002Feras\u002F13-parallax\u002F\">\u003Cspan class=\"era-cta__label\">Back\u003C\u002Fspan> \u003Cspan class=\"era-cta__to\">2012–2017 · Parallax & one-page storytelling\u003C\u002Fspan>\u003C\u002Fa>\u003C\u002Fnav>\n      \u003C\u002Fsection>\n\n      \u003C!-- My plants -->\n      \u003Csection class=\"md__panel md__panel--plants\" aria-labelledby=\"md-h-plants\">\n        \u003Ch2 id=\"md-h-plants\" class=\"md__subhead\">6 plants · 2 need water\u003C\u002Fh2>\n        \u003Cdiv class=\"md__grid\">\n          \u003Carticle class=\"md__card ripple\" data-trait=\"ripple\" tabindex=\"0\" aria-labelledby=\"md-p1\">\n            \u003Cdiv class=\"md__media md__media--teal\">\n              \u003Csvg viewBox=\"0 0 120 90\" aria-hidden=\"true\">\u003Cpath d=\"M60 70V34\" stroke=\"#1b5e20\" stroke-width=\"4\"\u002F>\u003Cpath d=\"M60 46c-16-2-26-14-24-28 14 0 24 12 24 28z\" fill=\"#66bb6a\"\u002F>\u003Cpath d=\"M60 40c14-4 22-16 20-30-14 2-22 14-20 30z\" fill=\"#43a047\"\u002F>\u003Cpath d=\"M42 62h36l-5 24H47z\" fill=\"#ff7043\"\u002F>\u003Cpath d=\"M40 58h40v8H40z\" fill=\"#f4511e\"\u002F>\u003C\u002Fsvg>\n            \u003C\u002Fdiv>\n            \u003Cdiv class=\"md__card-body\">\n              \u003Ch3 id=\"md-p1\" class=\"md__card-title\">Monstera \"Swiss\"\u003C\u002Fh3>\n              \u003Cp class=\"md__card-sub\">Living room · water every 7 days\u003C\u002Fp>\n              \u003Cdiv class=\"md__meter\" role=\"img\" aria-label=\"Soil moisture 22 percent\">\u003Cspan style=\"--v:22%\">\u003C\u002Fspan>\u003C\u002Fdiv>\n            \u003C\u002Fdiv>\n            \u003Cdiv class=\"md__actions\">\n              \u003Cbutton class=\"md__btn md__btn--flat ripple\" type=\"button\" data-water=\"Monstera\">Water\u003C\u002Fbutton>\n              \u003Cbutton class=\"md__btn md__btn--flat md__btn--muted ripple\" type=\"button\">Details\u003C\u002Fbutton>\n            \u003C\u002Fdiv>\n          \u003C\u002Farticle>\n          \u003Carticle class=\"md__card ripple\" tabindex=\"0\" aria-labelledby=\"md-p2\">\n            \u003Cdiv class=\"md__media md__media--amber\">\n              \u003Csvg viewBox=\"0 0 120 90\" aria-hidden=\"true\">\u003Crect x=\"52\" y=\"20\" width=\"16\" height=\"46\" rx=\"8\" fill=\"#7cb342\"\u002F>\u003Crect x=\"38\" y=\"34\" width=\"12\" height=\"22\" rx=\"6\" fill=\"#8bc34a\"\u002F>\u003Crect x=\"70\" y=\"28\" width=\"12\" height=\"20\" rx=\"6\" fill=\"#8bc34a\"\u002F>\u003Cpath d=\"M44 50h6M70 42h-6\" stroke=\"#7cb342\" stroke-width=\"6\"\u002F>\u003Cpath d=\"M42 62h36l-5 24H47z\" fill=\"#5c6bc0\"\u002F>\u003Cpath d=\"M40 58h40v8H40z\" fill=\"#3f51b5\"\u002F>\u003C\u002Fsvg>\n            \u003C\u002Fdiv>\n            \u003Cdiv class=\"md__card-body\">\n              \u003Ch3 id=\"md-p2\" class=\"md__card-title\">Prickly Pete\u003C\u002Fh3>\n              \u003Cp class=\"md__card-sub\">Window sill · water every 21 days\u003C\u002Fp>\n              \u003Cdiv class=\"md__meter\" role=\"img\" aria-label=\"Soil moisture 64 percent\">\u003Cspan style=\"--v:64%\">\u003C\u002Fspan>\u003C\u002Fdiv>\n            \u003C\u002Fdiv>\n            \u003Cdiv class=\"md__actions\">\n              \u003Cbutton class=\"md__btn md__btn--flat ripple\" type=\"button\" data-water=\"Prickly Pete\">Water\u003C\u002Fbutton>\n              \u003Cbutton class=\"md__btn md__btn--flat md__btn--muted ripple\" type=\"button\">Details\u003C\u002Fbutton>\n            \u003C\u002Fdiv>\n          \u003C\u002Farticle>\n          \u003Carticle class=\"md__card ripple\" tabindex=\"0\" aria-labelledby=\"md-p3\">\n            \u003Cdiv class=\"md__media md__media--pink\">\n              \u003Csvg viewBox=\"0 0 120 90\" aria-hidden=\"true\">\u003Cpath d=\"M60 66V30\" stroke=\"#2e7d32\" stroke-width=\"3\"\u002F>\u003Ccircle cx=\"60\" cy=\"26\" r=\"10\" fill=\"#ec407a\"\u002F>\u003Ccircle cx=\"60\" cy=\"26\" r=\"4\" fill=\"#fff59d\"\u002F>\u003Cpath d=\"M60 50c-10 0-18-6-20-14 10 0 18 6 20 14zM60 44c10 0 16-6 18-14-10 0-16 6-18 14z\" fill=\"#66bb6a\"\u002F>\u003Cpath d=\"M42 62h36l-5 24H47z\" fill=\"#26a69a\"\u002F>\u003Cpath d=\"M40 58h40v8H40z\" fill=\"#00897b\"\u002F>\u003C\u002Fsvg>\n            \u003C\u002Fdiv>\n            \u003Cdiv class=\"md__card-body\">\n              \u003Ch3 id=\"md-p3\" class=\"md__card-title\">Violet the Violet\u003C\u002Fh3>\n              \u003Cp class=\"md__card-sub\">Desk · water every 4 days\u003C\u002Fp>\n              \u003Cdiv class=\"md__meter md__meter--low\" role=\"img\" aria-label=\"Soil moisture 12 percent\">\u003Cspan style=\"--v:12%\">\u003C\u002Fspan>\u003C\u002Fdiv>\n            \u003C\u002Fdiv>\n            \u003Cdiv class=\"md__actions\">\n              \u003Cbutton class=\"md__btn md__btn--flat ripple\" type=\"button\" data-water=\"Violet\">Water\u003C\u002Fbutton>\n              \u003Cbutton class=\"md__btn md__btn--flat md__btn--muted ripple\" type=\"button\">Details\u003C\u002Fbutton>\n            \u003C\u002Fdiv>\n          \u003C\u002Farticle>\n        \u003C\u002Fdiv>\n        \u003Carticle class=\"md__card md__tip\">\n          \u003Cdiv class=\"md__tip-icon\" aria-hidden=\"true\">\u003Csvg viewBox=\"0 0 24 24\">\u003Cpath d=\"M9 21h6v-1H9v1zm3-19a7 7 0 0 0-4 12.7V17h8v-2.3A7 7 0 0 0 12 2z\"\u002F>\u003C\u002Fsvg>\u003C\u002Fdiv>\n          \u003Cdiv class=\"md__tip-body\">\n            \u003Ch3 class=\"md__card-title\">Light check\u003C\u002Fh3>\n            \u003Cp class=\"md__card-sub\">Your living room gets about 4 hours of bright, indirect light. Monstera would like a little more.\u003C\u002Fp>\n            \u003Clabel class=\"md__switch\">\u003Cinput type=\"checkbox\" checked> \u003Cspan class=\"md__track\" aria-hidden=\"true\">\u003C\u002Fspan> Remind me at sunset\u003C\u002Flabel>\n          \u003C\u002Fdiv>\n          \u003Cbutton class=\"md__btn md__btn--raised ripple\" type=\"button\">Move plant\u003C\u002Fbutton>\n        \u003C\u002Farticle>\n      \u003C\u002Fsection>\n\n      \u003C!-- Today -->\n      \u003Csection class=\"md__panel md__panel--today\" aria-labelledby=\"md-h-today\">\n        \u003Ch2 id=\"md-h-today\" class=\"md__subhead\">Today\u003C\u002Fh2>\n        \u003Cul class=\"md__list md__card\">\n          \u003Cli>\u003Cspan class=\"md__avatar\" style=\"--c:#43a047\" aria-hidden=\"true\">M\u003C\u002Fspan>\u003Cspan>\u003Cstrong>Water Monstera\u003C\u002Fstrong>\u003Csmall>Overdue by 1 day\u003C\u002Fsmall>\u003C\u002Fspan>\u003Cbutton class=\"md__btn md__btn--flat ripple\" type=\"button\" data-water=\"Monstera\">Done\u003C\u002Fbutton>\u003C\u002Fli>\n          \u003Cli>\u003Cspan class=\"md__avatar\" style=\"--c:#ec407a\" aria-hidden=\"true\">V\u003C\u002Fspan>\u003Cspan>\u003Cstrong>Water Violet\u003C\u002Fstrong>\u003Csmall>Due this afternoon\u003C\u002Fsmall>\u003C\u002Fspan>\u003Cbutton class=\"md__btn md__btn--flat ripple\" type=\"button\" data-water=\"Violet\">Done\u003C\u002Fbutton>\u003C\u002Fli>\n          \u003Cli>\u003Cspan class=\"md__avatar\" style=\"--c:#7e57c2\" aria-hidden=\"true\">F\u003C\u002Fspan>\u003Cspan>\u003Cstrong>Mist the fern\u003C\u002Fstrong>\u003Csmall>Humidity is low (31%)\u003C\u002Fsmall>\u003C\u002Fspan>\u003Cbutton class=\"md__btn md__btn--flat ripple\" type=\"button\" data-water=\"the fern\">Done\u003C\u002Fbutton>\u003C\u002Fli>\n          \u003Cli>\u003Cspan class=\"md__avatar\" style=\"--c:#ffa000\" aria-hidden=\"true\">P\u003C\u002Fspan>\u003Cspan>\u003Cstrong>Rotate Prickly Pete\u003C\u002Fstrong>\u003Csmall>Leaning towards the light\u003C\u002Fsmall>\u003C\u002Fspan>\u003Cbutton class=\"md__btn md__btn--flat ripple\" type=\"button\" data-water=\"Prickly Pete\" data-verb=\"rotated\">Done\u003C\u002Fbutton>\u003C\u002Fli>\n        \u003C\u002Ful>\n        \u003Cp class=\"md__hint\">Swipe to dismiss was on the phone. Here, tap \u003Cem>Done\u003C\u002Fem>.\u003C\u002Fp>\n      \u003C\u002Fsection>\n\n      \u003C!-- Paper -->\n      \u003Csection class=\"md__panel md__panel--paper\" aria-labelledby=\"md-h-paper\">\n        \u003Ch2 id=\"md-h-paper\" class=\"md__subhead\">Everything is paper\u003C\u002Fh2>\n        \u003Cp class=\"md__body\">Material surfaces sit at a height measured in dp. The higher the sheet, the softer and wider its shadow: one key light from above, one ambient light all around.\u003C\u002Fp>\n        \u003Col class=\"md__elev\" data-trait=\"elevation\">\n          \u003Cli class=\"dp-0\">0dp\u003Csmall>Window\u003C\u002Fsmall>\u003C\u002Fli>\n          \u003Cli class=\"dp-1\">1dp\u003Csmall>Search bar\u003C\u002Fsmall>\u003C\u002Fli>\n          \u003Cli class=\"dp-2\">2dp\u003Csmall>Card\u003C\u002Fsmall>\u003C\u002Fli>\n          \u003Cli class=\"dp-4\">4dp\u003Csmall>App bar\u003C\u002Fsmall>\u003C\u002Fli>\n          \u003Cli class=\"dp-6\">6dp\u003Csmall>FAB, snackbar\u003C\u002Fsmall>\u003C\u002Fli>\n          \u003Cli class=\"dp-8\">8dp\u003Csmall>Menu, raised card\u003C\u002Fsmall>\u003C\u002Fli>\n          \u003Cli class=\"dp-16\">16dp\u003Csmall>Drawer\u003C\u002Fsmall>\u003C\u002Fli>\n          \u003Cli class=\"dp-24\">24dp\u003Csmall>Dialog\u003C\u002Fsmall>\u003C\u002Fli>\n        \u003C\u002Fol>\n      \u003C\u002Fsection>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003C!-- Floating action button and speed dial -->\n  \u003Cdiv class=\"md__fab-wrap\" data-trait=\"fab\">\n    \u003Cul class=\"md__dial\" id=\"md-dial\" aria-label=\"Quick actions\">\n      \u003Cli>\u003Cspan>Log a photo\u003C\u002Fspan>\u003Cbutton class=\"md__mini ripple\" type=\"button\" aria-label=\"Log a photo\" style=\"--i:2\">\u003Csvg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\u003Ccircle cx=\"12\" cy=\"13\" r=\"3.2\"\u002F>\u003Cpath d=\"M9 3 7.2 5H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-3.2L15 3H9zm3 15a5 5 0 1 1 0-10 5 5 0 0 1 0 10z\"\u002F>\u003C\u002Fsvg>\u003C\u002Fbutton>\u003C\u002Fli>\n      \u003Cli>\u003Cspan>Water all\u003C\u002Fspan>\u003Cbutton class=\"md__mini ripple\" type=\"button\" aria-label=\"Water all plants\" data-water=\"all 6 plants\" style=\"--i:1\">\u003Csvg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\u003Cpath d=\"M12 2s-6 7-6 12a6 6 0 0 0 12 0c0-5-6-12-6-12z\"\u002F>\u003C\u002Fsvg>\u003C\u002Fbutton>\u003C\u002Fli>\n      \u003Cli>\u003Cspan>New plant\u003C\u002Fspan>\u003Cbutton class=\"md__mini ripple\" type=\"button\" aria-label=\"Add a new plant\" data-open-dialog style=\"--i:0\">\u003Csvg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\u003Cpath d=\"M11 22v-7.1C7.6 14.4 5 11.5 5 8c3.6 0 6.5 2.7 6.9 6.2C12.4 10.7 15.4 8 19 8c0 3.5-2.6 6.4-6 6.9V22z\"\u002F>\u003C\u002Fsvg>\u003C\u002Fbutton>\u003C\u002Fli>\n    \u003C\u002Ful>\n    \u003Cbutton class=\"md__fab ripple\" type=\"button\" id=\"md-fab\" aria-expanded=\"false\" aria-controls=\"md-dial\" aria-label=\"Quick actions\">\n      \u003Csvg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\u003Cpath d=\"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6z\"\u002F>\u003C\u002Fsvg>\n    \u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\n  \u003Cdialog class=\"md__dialog\" id=\"md-dialog\" aria-labelledby=\"md-dialog-title\">\n    \u003Cform method=\"dialog\" class=\"md__form\" data-trait=\"fields\">\n      \u003Ch2 id=\"md-dialog-title\">New plant\u003C\u002Fh2>\n      \u003Cdiv class=\"md__field\">\n        \u003Cinput id=\"md-name\" name=\"name\" placeholder=\" \" autocomplete=\"off\" required>\n        \u003Clabel for=\"md-name\">Nickname\u003C\u002Flabel>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"md__field\">\n        \u003Cinput id=\"md-room\" name=\"room\" placeholder=\" \" autocomplete=\"off\">\n        \u003Clabel for=\"md-room\">Room\u003C\u002Flabel>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"md__field\">\n        \u003Cinput id=\"md-days\" name=\"days\" type=\"number\" min=\"1\" max=\"60\" placeholder=\" \">\n        \u003Clabel for=\"md-days\">Water every (days)\u003C\u002Flabel>\n        \u003Csmall>Most houseplants like 7.\u003C\u002Fsmall>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"md__dialog-actions\">\n        \u003Cbutton class=\"md__btn md__btn--flat ripple\" type=\"submit\" value=\"cancel\" formnovalidate>Cancel\u003C\u002Fbutton>\n        \u003Cbutton class=\"md__btn md__btn--flat ripple\" type=\"submit\" value=\"save\">Save\u003C\u002Fbutton>\n      \u003C\u002Fdiv>\n    \u003C\u002Fform>\n  \u003C\u002Fdialog>\n\n  \u003Cdiv class=\"md__snackbar\" id=\"md-snack\" role=\"status\" aria-live=\"polite\" data-trait=\"snackbar\">\n    \u003Cspan class=\"md__snack-text\">Plant watered\u003C\u002Fspan>\n    \u003Cbutton class=\"md__snack-action\" type=\"button\">Undo\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\n  \u003Cfooter class=\"md__footer\">\n    \u003Cp>Pocket Garden 2.3 · Made for Android 5.0 Lollipop and up · \u003Ca href=\"#md-tab-plants\">Get it on your phone\u003C\u002Fa>\u003C\u002Fp>\n  \u003C\u002Ffooter>\n\u003C\u002Fdiv>\n","@layer era, shell;\n@layer era {\n\u002F* Era 14: Material Design. Paper, ink, a key light from above and bold colour. *\u002F\n[data-era=\"14\"] {\n  --md-primary: #00897b;      \u002F* Teal 600 *\u002F\n  --md-primary-dark: #00695c; \u002F* Teal 800: app bar, status bar *\u002F\n  --md-primary-text: #00796b; \u002F* Teal 700 for text on white *\u002F\n  --md-accent: #ff4081;       \u002F* Pink A200 *\u002F\n  --md-accent-light: #ff80ab; \u002F* Pink A100, snackbar action *\u002F\n  --md-bg: #eeeeee;           \u002F* Grey 200 window *\u002F\n  --md-ink-87: rgb(0 0 0 \u002F 0.87);\n  --md-ink-54: rgb(0 0 0 \u002F 0.6);\n  --md-ease: cubic-bezier(0.4, 0, 0.2, 1); \u002F* standard curve *\u002F\n  --md-decel: cubic-bezier(0, 0, 0.2, 1);\n\n  --dp-1: 0 1px 1px 0 rgb(0 0 0 \u002F 0.14), 0 2px 1px -1px rgb(0 0 0 \u002F 0.12), 0 1px 3px 0 rgb(0 0 0 \u002F 0.2);\n  --dp-2: 0 2px 2px 0 rgb(0 0 0 \u002F 0.14), 0 3px 1px -2px rgb(0 0 0 \u002F 0.2), 0 1px 5px 0 rgb(0 0 0 \u002F 0.12);\n  --dp-4: 0 4px 5px 0 rgb(0 0 0 \u002F 0.14), 0 1px 10px 0 rgb(0 0 0 \u002F 0.12), 0 2px 4px -1px rgb(0 0 0 \u002F 0.2);\n  --dp-6: 0 6px 10px 0 rgb(0 0 0 \u002F 0.14), 0 1px 18px 0 rgb(0 0 0 \u002F 0.12), 0 3px 5px -1px rgb(0 0 0 \u002F 0.2);\n  --dp-8: 0 8px 10px 1px rgb(0 0 0 \u002F 0.14), 0 3px 14px 2px rgb(0 0 0 \u002F 0.12), 0 5px 5px -3px rgb(0 0 0 \u002F 0.2);\n  --dp-12: 0 12px 17px 2px rgb(0 0 0 \u002F 0.14), 0 5px 22px 4px rgb(0 0 0 \u002F 0.12), 0 7px 8px -4px rgb(0 0 0 \u002F 0.2);\n  --dp-16: 0 16px 24px 2px rgb(0 0 0 \u002F 0.14), 0 6px 30px 5px rgb(0 0 0 \u002F 0.12), 0 8px 10px -5px rgb(0 0 0 \u002F 0.2);\n  --dp-24: 0 24px 38px 3px rgb(0 0 0 \u002F 0.14), 0 9px 46px 8px rgb(0 0 0 \u002F 0.12), 0 11px 15px -7px rgb(0 0 0 \u002F 0.2);\n\n  background: var(--md-bg);\n  color: var(--md-ink-87);\n  font-family: Roboto, 'Roboto Flex', 'Noto Sans', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;\n  font-size: 14px;\n  line-height: 20px;\n  -webkit-font-smoothing: antialiased;\n\n  .md {\n    position: relative;\n    min-height: 100%;\n  }\n\n  svg {\n    fill: currentColor;\n  }\n\n  .md__status {\n    display: flex;\n    justify-content: space-between;\n    height: 24px;\n    padding: 0 16px;\n    background: #004d40;\n    color: rgb(255 255 255 \u002F 0.85);\n    font-size: 12px;\n    line-height: 24px;\n  }\n\n  \u002F* ---------- App bar + tabs, one extended 4dp sheet ---------- *\u002F\n  .md__appbar {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    height: 64px;\n    padding: 0 8px 0 4px;\n    background: var(--md-primary-dark);\n    color: #fff;\n  }\n  .md__title {\n    flex: 1;\n    margin: 0 0 0 20px;\n    font-size: 20px;\n    font-weight: 500;\n    letter-spacing: 0.02em;\n  }\n  .md__icon-btn {\n    display: grid;\n    place-items: center;\n    width: 48px;\n    height: 48px;\n    padding: 0;\n    border: 0;\n    border-radius: 50%;\n    background: transparent;\n    color: inherit;\n    cursor: pointer;\n    svg {\n      width: 24px;\n      height: 24px;\n    }\n  }\n\n  .md__tabs > input {\n    position: absolute;\n    opacity: 0;\n    pointer-events: none;\n  }\n  .md__tablist {\n    position: relative;\n    display: grid;\n    grid-template-columns: repeat(3, minmax(0, 160px));\n    padding-left: 56px;\n    background: var(--md-primary-dark);\n    box-shadow: var(--dp-4);\n    z-index: 2;\n    label {\n      height: 48px;\n      display: grid;\n      place-items: center;\n      color: rgb(255 255 255 \u002F 0.75);\n      font-size: 14px;\n      font-weight: 500;\n      text-transform: uppercase;\n      letter-spacing: 0.06em;\n      cursor: pointer;\n      transition: color 200ms var(--md-ease);\n    }\n  }\n  .md__ink {\n    position: absolute;\n    bottom: 0;\n    left: 56px;\n    width: min(160px, calc((100% - 56px) \u002F 3));\n    height: 2px;\n    background: var(--md-accent);\n    transition: transform 250ms var(--md-ease);\n  }\n  #md-tab-today:checked ~ .md__tablist .md__ink { transform: translateX(100%); }\n  #md-tab-paper:checked ~ .md__tablist .md__ink { transform: translateX(200%); }\n  #md-tab-plants:checked ~ .md__tablist [for='md-tab-plants'],\n  #md-tab-today:checked ~ .md__tablist [for='md-tab-today'],\n  #md-tab-paper:checked ~ .md__tablist [for='md-tab-paper'] {\n    color: #fff;\n  }\n  #md-tab-plants:focus-visible ~ .md__tablist [for='md-tab-plants'],\n  #md-tab-today:focus-visible ~ .md__tablist [for='md-tab-today'],\n  #md-tab-paper:focus-visible ~ .md__tablist [for='md-tab-paper'] {\n    background: rgb(255 255 255 \u002F 0.16);\n    outline: 2px solid #fff;\n    outline-offset: -4px;\n  }\n\n  .md__panels {\n    max-width: 1040px;\n    margin: 0 auto;\n    padding: 8px 24px 120px;\n  }\n  .md__panel {\n    display: none;\n  }\n  #md-tab-plants:checked ~ .md__panels .md__panel--plants,\n  #md-tab-today:checked ~ .md__panels .md__panel--today,\n  #md-tab-paper:checked ~ .md__panels .md__panel--paper {\n    display: block;\n    animation: e14-enter 300ms var(--md-decel);\n  }\n\n  .md__subhead {\n    margin: 24px 0 16px;\n    color: var(--md-ink-54);\n    font-size: 14px;\n    font-weight: 500;\n  }\n  .md__body {\n    max-width: 60ch;\n    font-size: 16px;\n    line-height: 24px;\n  }\n  .md__hint {\n    color: var(--md-ink-54);\n  }\n\n  \u002F* ---------- Cards ---------- *\u002F\n  .md__grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));\n    gap: 16px;\n  }\n  .md__card {\n    position: relative;\n    overflow: hidden;\n    background: #fff;\n    border-radius: 2px;\n    box-shadow: var(--dp-2);\n    transition: box-shadow 280ms var(--md-ease);\n    outline: none;\n  }\n  \u002F* Raised on pick-up: the card lifts from 2dp to 8dp. *\u002F\n  .md__card:is(:hover, :focus-visible) {\n    box-shadow: var(--dp-8);\n  }\n  .md__card:focus-visible {\n    outline: 2px solid var(--md-primary);\n    outline-offset: 2px;\n  }\n  .md__media {\n    height: 150px;\n    display: grid;\n    place-items: center;\n    svg {\n      width: 160px;\n      height: 120px;\n    }\n  }\n  .md__media--teal { background: #b2dfdb; }\n  .md__media--amber { background: #ffe082; }\n  .md__media--pink { background: #f8bbd0; }\n  .md__card-body {\n    padding: 16px 16px 8px;\n  }\n  .md__card-title {\n    margin: 0;\n    font-size: 24px;\n    font-weight: 400;\n    line-height: 32px;\n  }\n  .md__card-sub {\n    margin: 2px 0 12px;\n    color: var(--md-ink-54);\n  }\n  .md__meter {\n    height: 4px;\n    background: #b2dfdb;\n    span {\n      display: block;\n      width: var(--v);\n      height: 100%;\n      background: var(--md-primary);\n      transition: width 600ms var(--md-ease);\n    }\n  }\n  .md__meter--low span {\n    background: var(--md-accent);\n  }\n  .md__actions {\n    display: flex;\n    gap: 8px;\n    padding: 8px;\n  }\n\n\n  \u002F* ---------- Tip card, raised button, switch ---------- *\u002F\n  .md__tip {\n    display: grid;\n    grid-template-columns: 56px 1fr auto;\n    align-items: center;\n    gap: 16px;\n    margin-top: 16px;\n    padding: 16px 24px;\n  }\n  .md__tip-icon {\n    display: grid;\n    place-items: center;\n    width: 56px;\n    height: 56px;\n    border-radius: 50%;\n    background: #fff8e1;\n    color: #ffa000;\n    svg {\n      width: 28px;\n      height: 28px;\n    }\n  }\n  .md__tip .md__card-sub {\n    max-width: 52ch;\n  }\n  .md__btn.md__btn--raised {\n    padding: 0 16px;\n    background: var(--md-primary-text);\n    color: #fff;\n    box-shadow: var(--dp-2);\n    transition: box-shadow 280ms var(--md-ease);\n  }\n  .md__btn.md__btn--raised:hover {\n    background: var(--md-primary-dark);\n    box-shadow: var(--dp-4);\n  }\n  .md__btn.md__btn--raised:active {\n    box-shadow: var(--dp-8);\n  }\n  .md__switch {\n    display: inline-flex;\n    align-items: center;\n    gap: 12px;\n    cursor: pointer;\n    input {\n      position: absolute;\n      opacity: 0;\n    }\n  }\n  .md__track {\n    position: relative;\n    width: 34px;\n    height: 14px;\n    border-radius: 7px;\n    background: rgb(0 0 0 \u002F 0.38);\n    transition: background 150ms var(--md-ease);\n    &::after {\n      content: '';\n      position: absolute;\n      left: -3px;\n      top: -3px;\n      width: 20px;\n      height: 20px;\n      border-radius: 50%;\n      background: #fafafa;\n      box-shadow: var(--dp-1);\n      transition: transform 150ms var(--md-ease), background 150ms;\n    }\n  }\n  .md__switch input:checked + .md__track {\n    background: #f48fb1;\n    &::after {\n      transform: translateX(20px);\n      background: var(--md-accent);\n    }\n  }\n  .md__switch input:focus-visible + .md__track {\n    outline: 2px solid var(--md-primary);\n    outline-offset: 6px;\n  }\n\n  \u002F* ---------- Buttons ---------- *\u002F\n  .md__btn {\n    position: relative;\n    overflow: hidden;\n    min-width: 64px;\n    height: 36px;\n    padding: 0 8px;\n    border: 0;\n    border-radius: 2px;\n    background: transparent;\n    color: var(--md-primary-text);\n    font: inherit;\n    font-weight: 500;\n    text-transform: uppercase;\n    letter-spacing: 0.06em;\n    cursor: pointer;\n  }\n  .md__btn:hover {\n    background: rgb(0 0 0 \u002F 0.06);\n  }\n  .md__btn:focus-visible,\n  .md__icon-btn:focus-visible,\n  .md__mini:focus-visible,\n  .md__snack-action:focus-visible {\n    outline: 2px solid currentColor;\n    outline-offset: 2px;\n  }\n  .md__btn--muted {\n    color: var(--md-ink-54);\n  }\n\n  \u002F* ---------- Ripple ---------- *\u002F\n  .ripple {\n    position: relative;\n    overflow: hidden;\n  }\n  .md__ripple {\n    position: absolute;\n    left: var(--x);\n    top: var(--y);\n    width: var(--d);\n    height: var(--d);\n    margin: calc(var(--d) \u002F -2) 0 0 calc(var(--d) \u002F -2);\n    border-radius: 50%;\n    background: currentColor;\n    opacity: 0.22;\n    pointer-events: none;\n    transform: scale(0);\n    animation: e14-ripple 550ms var(--md-decel) forwards;\n  }\n  .md__card > .md__ripple {\n    color: var(--md-primary);\n  }\n\n  \u002F* ---------- Today list ---------- *\u002F\n  .md__list {\n    list-style: none;\n    margin: 0;\n    padding: 8px 0;\n    max-width: 640px;\n    li {\n      display: grid;\n      grid-template-columns: 40px 1fr auto;\n      align-items: center;\n      gap: 16px;\n      min-height: 72px;\n      padding: 0 16px;\n      transition: opacity 300ms var(--md-ease), transform 300ms var(--md-ease);\n    }\n    li + li {\n      border-top: 1px solid rgb(0 0 0 \u002F 0.12);\n    }\n    li.is-done {\n      opacity: 0.45;\n      strong {\n        text-decoration: line-through;\n      }\n    }\n    strong {\n      display: block;\n      font-size: 16px;\n      font-weight: 400;\n      line-height: 24px;\n    }\n    small {\n      color: var(--md-ink-54);\n      font-size: 14px;\n    }\n  }\n  .md__avatar {\n    display: grid;\n    place-items: center;\n    width: 40px;\n    height: 40px;\n    border-radius: 50%;\n    background: var(--c);\n    color: #fff;\n    font-size: 18px;\n    font-weight: 500;\n  }\n\n  \u002F* ---------- Elevation ladder ---------- *\u002F\n  .md__elev {\n    list-style: none;\n    margin: 32px 0 0;\n    padding: 0;\n    display: grid;\n    grid-template-columns: repeat(4, minmax(0, 1fr));\n    gap: 40px 32px;\n    max-width: 720px;\n    li {\n      display: grid;\n      place-content: center;\n      text-align: center;\n      height: 96px;\n      background: #fff;\n      border-radius: 2px;\n      font-size: 20px;\n      font-weight: 500;\n      transition: box-shadow 280ms var(--md-ease);\n    }\n    small {\n      color: var(--md-ink-54);\n      font-size: 12px;\n      font-weight: 400;\n    }\n    .dp-0 { background: transparent; border: 1px dashed rgb(0 0 0 \u002F 0.26); }\n    .dp-1 { box-shadow: var(--dp-1); }\n    .dp-2 { box-shadow: var(--dp-2); }\n    .dp-4 { box-shadow: var(--dp-4); }\n    .dp-6 { box-shadow: var(--dp-6); }\n    .dp-8 { box-shadow: var(--dp-8); }\n    .dp-16 { box-shadow: var(--dp-16); }\n    .dp-24 { box-shadow: var(--dp-24); }\n  }\n\n  \u002F* ---------- FAB and speed dial ---------- *\u002F\n  .md__fab-wrap {\n    position: fixed;\n    right: 24px;\n    bottom: 24px;\n    z-index: 20;\n    display: grid;\n    justify-items: end;\n    gap: 16px;\n    transition: transform 250ms var(--md-ease);\n  }\n  .md__fab {\n    display: grid;\n    place-items: center;\n    width: 56px;\n    height: 56px;\n    padding: 0;\n    border: 0;\n    border-radius: 50%;\n    background: var(--md-accent);\n    color: #fff;\n    box-shadow: var(--dp-6);\n    cursor: pointer;\n    transition: box-shadow 200ms var(--md-ease), background 200ms;\n    svg {\n      width: 24px;\n      height: 24px;\n      transition: transform 250ms var(--md-ease);\n    }\n  }\n  .md__fab:hover,\n  .md__fab:focus-visible {\n    box-shadow: var(--dp-12);\n  }\n  .md__fab:focus-visible {\n    outline: 3px solid #880e4f;\n    outline-offset: 3px;\n  }\n  .md__dial {\n    list-style: none;\n    margin: 0;\n    padding: 0 8px 0 0;\n    display: grid;\n    gap: 16px;\n    justify-items: end;\n    visibility: hidden;\n    li {\n      display: flex;\n      align-items: center;\n      gap: 16px;\n    }\n    span {\n      padding: 4px 8px;\n      background: #fff;\n      border-radius: 2px;\n      box-shadow: var(--dp-2);\n      color: var(--md-ink-87);\n      font-size: 13px;\n      opacity: 0;\n      transition: opacity 150ms var(--md-ease);\n    }\n  }\n  .md__mini {\n    display: grid;\n    place-items: center;\n    width: 40px;\n    height: 40px;\n    padding: 0;\n    border: 0;\n    border-radius: 50%;\n    background: #fff;\n    color: var(--md-primary-text);\n    box-shadow: var(--dp-6);\n    cursor: pointer;\n    transform: scale(0);\n    transition: transform 200ms var(--md-ease) calc(var(--i) * 40ms);\n    svg {\n      width: 20px;\n      height: 20px;\n    }\n  }\n  \u002F* Opened by JS (.is-open), or by focus when scripts are off. *\u002F\n  .md__fab-wrap.is-open,\n  .md:not(.md--js) .md__fab-wrap:focus-within {\n    .md__dial {\n      visibility: visible;\n    }\n    .md__dial span {\n      opacity: 1;\n    }\n    .md__mini {\n      transform: none;\n    }\n    .md__fab svg {\n      transform: rotate(135deg);\n    }\n  }\n  .md__fab-wrap.is-lifted {\n    transform: translateY(-64px);\n  }\n\n  \u002F* ---------- Dialog ---------- *\u002F\n  .md__dialog {\n    width: min(360px, calc(100cqw - 48px));\n    padding: 0;\n    border: 0;\n    border-radius: 2px;\n    background: #fff;\n    color: var(--md-ink-87);\n    box-shadow: var(--dp-24);\n    transform-origin: 100% 100%;\n  }\n  .md__dialog[open] {\n    animation: e14-morph 300ms var(--md-decel);\n  }\n  .md__dialog::backdrop {\n    background: rgb(0 0 0 \u002F 0.4);\n  }\n  .md__form {\n    padding: 24px 24px 8px;\n    h2 {\n      margin: 0 0 12px;\n      font-size: 20px;\n      font-weight: 500;\n    }\n  }\n  .md__dialog-actions {\n    display: flex;\n    justify-content: flex-end;\n    gap: 8px;\n    margin: 16px -16px 0 0;\n  }\n\n  .md__field {\n    position: relative;\n    padding-top: 16px;\n    margin-bottom: 8px;\n    input {\n      width: 100%;\n      box-sizing: border-box;\n      height: 40px;\n      padding: 8px 0;\n      border: 0;\n      border-bottom: 1px solid rgb(0 0 0 \u002F 0.42);\n      border-radius: 0;\n      background: transparent;\n      color: inherit;\n      font: inherit;\n      font-size: 16px;\n      outline: none;\n    }\n    label {\n      position: absolute;\n      left: 0;\n      top: 26px;\n      color: var(--md-ink-54);\n      font-size: 16px;\n      pointer-events: none;\n      transform-origin: 0 0;\n      transition: transform 150ms var(--md-ease), color 150ms;\n    }\n    \u002F* The underline grows from the centre when focused. *\u002F\n    &::after {\n      content: '';\n      position: absolute;\n      left: 0;\n      right: 0;\n      top: 54px;\n      height: 2px;\n      background: var(--md-primary);\n      transform: scaleX(0);\n      transition: transform 200ms var(--md-ease);\n    }\n    &:focus-within::after {\n      transform: scaleX(1);\n    }\n    input:focus + label,\n    input:not(:placeholder-shown) + label {\n      transform: translateY(-22px) scale(0.75);\n    }\n    input:focus + label {\n      color: var(--md-primary-text);\n    }\n    small {\n      display: block;\n      margin-top: 4px;\n      color: var(--md-ink-54);\n      font-size: 12px;\n    }\n  }\n\n  \u002F* ---------- Snackbar ---------- *\u002F\n  .md__snackbar {\n    position: fixed;\n    left: 50%;\n    bottom: 0;\n    z-index: 25;\n    display: flex;\n    align-items: center;\n    gap: 24px;\n    min-width: 288px;\n    max-width: 568px;\n    box-sizing: border-box;\n    padding: 6px 8px 6px 24px;\n    background: #323232;\n    color: #fff;\n    border-radius: 2px 2px 0 0;\n    box-shadow: var(--dp-6);\n    transform: translate(-50%, 110%);\n    visibility: hidden;\n    transition: transform 250ms var(--md-ease), visibility 0s linear 250ms;\n  }\n  .md__snackbar.is-shown {\n    transform: translate(-50%, 0);\n    visibility: visible;\n    transition: transform 250ms var(--md-decel);\n  }\n  .md__snack-text {\n    flex: 1;\n    padding: 8px 0;\n  }\n  .md__snack-action {\n    height: 36px;\n    padding: 0 8px;\n    border: 0;\n    border-radius: 2px;\n    background: transparent;\n    color: var(--md-accent-light);\n    font: inherit;\n    font-weight: 500;\n    text-transform: uppercase;\n    letter-spacing: 0.06em;\n    cursor: pointer;\n  }\n\n  .md__footer {\n    padding: 0 24px 96px;\n    text-align: center;\n    color: var(--md-ink-54);\n    font-size: 12px;\n    a {\n      color: var(--md-primary-text);\n    }\n  }\n\n  \u002F* ---------- Era stamp: the app bar's subtitle row ---------- *\u002F\n  .md__appbar {\n    flex-wrap: wrap;\n    height: auto;\n    min-height: 64px;\n    row-gap: 0;\n  }\n  .era-stamp {\n    flex: 1 0 100%;\n    box-sizing: border-box;\n    margin: -10px 0 0;\n    padding: 0 16px 12px 72px; \u002F* the 72dp title keyline *\u002F\n    color: rgb(255 255 255 \u002F 0.82);\n    font-size: 13px;\n    line-height: 16px;\n    letter-spacing: 0.02em;\n  }\n  .era-stamp__no {\n    font-weight: 500;\n  }\n  .era-stamp__years::before,\n  .era-stamp__title::before {\n    content: '· ';\n  }\n\n  \u002F* ---------- Travel card: a raised accent button and a flat one ---------- *\u002F\n  .md__travel {\n    margin: 16px 0 8px;\n    padding: 16px 16px 8px;\n    .md__card-sub {\n      margin-bottom: 16px;\n    }\n  }\n  .era-cta {\n    display: grid;\n    gap: 4px;\n    justify-items: start;\n  }\n  .era-cta a {\n    position: relative;\n    overflow: hidden;\n    display: grid;\n    border-radius: 2px;\n    text-decoration: none;\n    -webkit-tap-highlight-color: transparent;\n  }\n  .era-cta__label {\n    font-weight: 500;\n    text-transform: uppercase;\n    letter-spacing: 0.06em;\n  }\n  .era-cta__to {\n    font-size: 12px;\n    line-height: 16px;\n  }\n  .era-cta__next {\n    justify-self: stretch;\n    padding: 10px 16px;\n    background: #d81b60; \u002F* Pink 600: the accent, dark enough for white text *\u002F\n    color: #fff;\n    box-shadow: var(--dp-2);\n    transition: box-shadow 280ms var(--md-ease), background 200ms var(--md-ease);\n    .era-cta__label::after {\n      content: ' \\2192';\n    }\n    .era-cta__to {\n      color: rgb(255 255 255 \u002F 0.9);\n    }\n    &:hover {\n      background: #c2185b;\n      box-shadow: var(--dp-4);\n    }\n    &:active {\n      box-shadow: var(--dp-8);\n    }\n    &:focus-visible {\n      outline: 3px solid #880e4f;\n      outline-offset: 3px;\n      box-shadow: var(--dp-8);\n    }\n  }\n  .era-cta__prev {\n    margin-left: -8px;\n    padding: 8px;\n    color: var(--md-primary-text);\n    grid-template-columns: auto 1fr;\n    column-gap: 8px;\n    align-items: baseline;\n    .era-cta__label::before {\n      content: '\\2190  ';\n    }\n    .era-cta__to {\n      color: var(--md-ink-54);\n    }\n    &:hover {\n      background: rgb(0 0 0 \u002F 0.06);\n    }\n    &:focus-visible {\n      outline: 2px solid var(--md-primary-text);\n      outline-offset: 2px;\n    }\n  }\n\n  @container screen (max-width: 600px) {\n    .md__appbar {\n      min-height: 56px;\n    }\n    .era-stamp {\n      padding-left: 64px;\n      margin-top: -8px;\n    }\n    .md__title {\n      margin-left: 12px;\n    }\n    .md__tablist {\n      padding-left: 0;\n      grid-template-columns: repeat(3, 1fr);\n    }\n    .md__ink {\n      left: 0;\n      width: calc(100% \u002F 3);\n    }\n    .md__panels {\n      padding: 4px 16px 96px;\n    }\n    .md__elev {\n      grid-template-columns: repeat(2, minmax(0, 1fr));\n    }\n    .md__tip {\n      grid-template-columns: 1fr;\n      justify-items: start;\n    }\n    .md__fab-wrap {\n      right: 16px;\n      bottom: 16px;\n    }\n    .md__snackbar {\n      left: 0;\n      right: 0;\n      min-width: 0;\n      max-width: none;\n      border-radius: 0;\n      transform: translateY(110%);\n    }\n    .md__snackbar.is-shown {\n      transform: none;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .md__ripple {\n      display: none;\n    }\n  }\n}\n\n@keyframes e14-ripple {\n  to {\n    transform: scale(1);\n    opacity: 0;\n  }\n}\n@keyframes e14-enter {\n  from {\n    opacity: 0;\n    transform: translateY(16px);\n  }\n}\n@keyframes e14-morph {\n  from {\n    opacity: 0;\n    transform: scale(0.15);\n    border-radius: 50%;\n  }\n  60% {\n    opacity: 1;\n  }\n}\n\n}",[84,86,88,90],{"caption":50,"file":48,"html":85},"\u003Cpre class=\"shiki github-dark-dimmed\" style=\"background-color:#22272e;color:#adbac7\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">--dp-1: 0 1px 1px 0 rgb(0 0 0 \u002F 0\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">.14\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">), 0 2px 1px -1px rgb(0 0 0 \u002F 0\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">.12\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">), 0 1px 3px 0 rgb(0 0 0 \u002F 0\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">.2\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">--dp-2: 0 2px 2px 0 rgb(0 0 0 \u002F 0\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">.14\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">), 0 3px 1px -2px rgb(0 0 0 \u002F 0\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">.2\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">), 0 1px 5px 0 rgb(0 0 0 \u002F 0\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">.12\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">--dp-4: 0 4px 5px 0 rgb(0 0 0 \u002F 0\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">.14\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">), 0 1px 10px 0 rgb(0 0 0 \u002F 0\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">.12\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">), 0 2px 4px -1px rgb(0 0 0 \u002F 0\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">.2\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">--dp-6: 0 6px 10px 0 rgb(0 0 0 \u002F 0\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">.14\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">), 0 1px 18px 0 rgb(0 0 0 \u002F 0\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">.12\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">), 0 3px 5px -1px rgb(0 0 0 \u002F 0\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">.2\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">--dp-8: 0 8px 10px 1px rgb(0 0 0 \u002F 0\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">.14\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">), 0 3px 14px 2px rgb(0 0 0 \u002F 0\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">.12\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">), 0 5px 5px -3px rgb(0 0 0 \u002F 0\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">.2\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">--dp-12: 0 12px 17px 2px rgb(0 0 0 \u002F 0\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">.14\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">), 0 5px 22px 4px rgb(0 0 0 \u002F 0\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">.12\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">), 0 7px 8px -4px rgb(0 0 0 \u002F 0\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">.2\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">--dp-16: 0 16px 24px 2px rgb(0 0 0 \u002F 0\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">.14\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">), 0 6px 30px 5px rgb(0 0 0 \u002F 0\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">.12\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">), 0 8px 10px -5px rgb(0 0 0 \u002F 0\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">.2\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">--dp-24: 0 24px 38px 3px rgb(0 0 0 \u002F 0\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">.14\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">), 0 9px 46px 8px rgb(0 0 0 \u002F 0\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">.12\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">), 0 11px 15px -7px rgb(0 0 0 \u002F 0\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">.2\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">);\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"caption":55,"file":53,"html":87},"\u003Cpre class=\"shiki github-dark-dimmed\" style=\"background-color:#22272e;color:#adbac7\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#768390\">\u002F** Ink spreads from where the finger touched, sized to reach the far corner. *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F47067\">function\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\"> ripple\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#F69D50\">e\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">:\u003C\u002Fspan>\u003Cspan style=\"color:#F69D50\"> PointerEvent\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F47067\">  const\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> host\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> (e.target \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">as\u003C\u002Fspan>\u003Cspan style=\"color:#F69D50\"> HTMLElement\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">).\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">closest\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"><\u003C\u002Fspan>\u003Cspan style=\"color:#F69D50\">HTMLElement\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>(\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">'.ripple'\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F47067\">  if\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> (\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">!\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">host \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">||\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"> !\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">root.\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">contains\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(host) \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">||\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\"> quiet\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">()) \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">return\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#768390\">  \u002F\u002F A button inside a card ripples on its own; do not ripple the card too.\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F47067\">  if\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> (host.classList.\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">contains\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">'md__card'\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">) \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">&&\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> (e.target \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">as\u003C\u002Fspan>\u003Cspan style=\"color:#F69D50\"> HTMLElement\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">).\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">closest\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">'button'\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">)) \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">return\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F47067\">  const\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> r\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> host.\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">getBoundingClientRect\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">()\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F47067\">  const\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> x\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> e.clientX \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">-\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> r.left\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F47067\">  const\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> y\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> e.clientY \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">-\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> r.top\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F47067\">  const\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> d\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 2\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"> *\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> Math.\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">hypot\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(Math.\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">max\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(x, r.width \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">-\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> x), Math.\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">max\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(y, r.height \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">-\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> y))\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F47067\">  const\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> ink\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> document.\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">createElement\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">'span'\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  ink.className \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\"> 'md__ripple'\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  ink.style.cssText \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\"> `--x:${\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">x\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">}px;--y:${\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">y\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">}px;--d:${\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">d\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">}px`\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  host.\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">append\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(ink)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  ink.\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">addEventListener\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">'animationend'\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, () \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">=>\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> ink.\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">remove\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">())\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">}\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"caption":57,"file":48,"html":89},"\u003Cpre class=\"shiki github-dark-dimmed\" style=\"background-color:#22272e;color:#adbac7\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">.md__field\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  position\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">relative\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  padding-top\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">16\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">px\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  margin-bottom\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">8\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">px\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  input\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">    width\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">100\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">%\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">    box-sizing\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">border-box\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">    height\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">40\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">px\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">    padding\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">8\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">px\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 0\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">    border\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">0\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">    border-bottom\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">1\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">px\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> solid\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> rgb\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">0\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 0\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 0\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> \u002F \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">0.42\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">    border-radius\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">0\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">    background\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">transparent\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">    color\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">inherit\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">    font\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">inherit\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">    font-size\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">16\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">px\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">    outline\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">none\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#8DDB8C\">  label\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">    position\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">absolute\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">    left\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">0\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">    top\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">26\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">px\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">    color\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">var\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#F69D50\">--md-ink-54\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">    font-size\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">16\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">px\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">    pointer-events\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">none\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">    transform-origin\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">0\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 0\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">    transition\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: transform \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">150\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">ms\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> var\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#F69D50\">--md-ease\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">), \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">color\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 150\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">ms\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#768390\">  \u002F* The underline grows from the centre when focused. *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  &\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">::after\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">    content\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">''\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">    position\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">absolute\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">    left\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">0\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">    right\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">0\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">    top\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">54\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">px\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">    height\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">2\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">px\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">    background\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">var\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#F69D50\">--md-primary\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">    transform\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">scaleX\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">0\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">    transition\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: transform \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">200\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">ms\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> var\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#F69D50\">--md-ease\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  &\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">:focus-within::after\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">    transform\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">scaleX\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">1\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#8DDB8C\">  input\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">:focus\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"> +\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\"> label\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#8DDB8C\">  input\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">:not\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(:\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">placeholder-shown\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">) \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">+\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\"> label\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">    transform\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">translateY\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">-22\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">px\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">) \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">scale\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">0.75\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#8DDB8C\">  input\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">:focus\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"> +\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\"> label\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">    color\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">var\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#F69D50\">--md-primary-text\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#8DDB8C\">  small\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">    display\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">block\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">    margin-top\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">4\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">px\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">    color\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">var\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#F69D50\">--md-ink-54\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">    font-size\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">12\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">px\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">}\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"caption":62,"file":60,"html":91},"\u003Cpre class=\"shiki github-dark-dimmed\" style=\"background-color:#22272e;color:#adbac7\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\"><\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">div\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"md__fab-wrap\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> data-trait\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"fab\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">ul\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"md__dial\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> id\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"md-dial\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> aria-label\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"Quick actions\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">    <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">li\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">span\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>Log a photo<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">span\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">button\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"md__mini ripple\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> type\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"button\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> aria-label\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"Log a photo\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> style\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"--i:2\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">svg\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> viewBox\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"0 0 24 24\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> aria-hidden\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"true\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">circle\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> cx\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"12\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> cy\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"13\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> r\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"3.2\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">\u002F><\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">path\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> d\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"M9 3 7.2 5H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-3.2L15 3H9zm3 15a5 5 0 1 1 0-10 5 5 0 0 1 0 10z\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">\u002F><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">svg\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">button\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">li\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">    <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">li\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">span\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>Water all<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">span\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">button\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"md__mini ripple\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> type\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"button\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> aria-label\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"Water all plants\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> data-water\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"all 6 plants\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> style\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"--i:1\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">svg\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> viewBox\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"0 0 24 24\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> aria-hidden\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"true\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">path\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> d\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"M12 2s-6 7-6 12a6 6 0 0 0 12 0c0-5-6-12-6-12z\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">\u002F><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">svg\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">button\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">li\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">    <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">li\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">span\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>New plant<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">span\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">button\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"md__mini ripple\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> type\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"button\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> aria-label\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"Add a new plant\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> data-open-dialog\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> style\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"--i:0\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">svg\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> viewBox\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"0 0 24 24\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> aria-hidden\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"true\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">path\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> d\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"M11 22v-7.1C7.6 14.4 5 11.5 5 8c3.6 0 6.5 2.7 6.9 6.2C12.4 10.7 15.4 8 19 8c0 3.5-2.6 6.4-6 6.9V22z\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">\u002F><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">svg\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">button\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">li\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  <\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">ul\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">button\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"md__fab ripple\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> type\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"button\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> id\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"md-fab\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> aria-expanded\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"false\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> aria-controls\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"md-dial\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> aria-label\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"Quick actions\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">    <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">svg\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> viewBox\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"0 0 24 24\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> aria-hidden\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"true\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">path\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> d\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6z\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">\u002F><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">svg\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  <\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">button\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\"><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">div\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",1791232162844]