[{"data":1,"prerenderedAt":85},["ShallowReactive",2],{"room:11-responsive":3},{"path":4,"meta":5,"html":75,"css":76,"skinCss":77,"snippets":78},"11-responsive",{"id":6,"slug":4,"title":7,"years":8,"summary":9,"context":10,"traits":14,"tech":36,"thenVsNow":41,"snippets":42,"sources":57,"recreated":73},"11","Responsive & grid frameworks","2010–2015","Smartphones made fixed 960px layouts obsolete. Fluid grids, flexible images and media queries let one site reflow for every screen, and grid frameworks made it the default.",{"screens":11,"connection":12,"browsers":13},"Anything from a 320px phone to a 2560px monitor, plus the first tablets; the viewport meta tag became mandatory","Broadband at home, 3G and early 4G on phones; page weight started to matter again","Chrome, Firefox, Safari and Mobile Safari, Android Browser; IE8 needed Respond.js to understand media queries",[15,18,21,24,27,30,33],{"id":16,"label":17},"fluid","Fluid percentage grid and flexible images",{"id":19,"label":20},"breakpoints","Breakpoints at 768 \u002F 992 \u002F 1200px",{"id":22,"label":23},"hamburger","Navbar that collapses to a hamburger",{"id":25,"label":26},"carousel","Hero carousel with arrows and dots",{"id":28,"label":29},"grid","12-column grid with .row and .col-* classes",{"id":31,"label":32},"mobile-first","Mobile-first min-width media queries",{"id":34,"label":35},"viewport","The viewport meta tag",[37,38,39,40],"CSS3 media queries (W3C Candidate Recommendation 2009, Recommendation 2012)","The viewport meta tag, introduced by Mobile Safari in 2007","Float-based 12-column grids from frameworks such as 960.gs, Foundation and Bootstrap","max-width: 100% for images; Respond.js and html5shiv for old Internet Explorer","Float grids and breakpoint classes gave way to CSS Grid, flexbox, container queries and clamp(); the hamburger survives everywhere.",[43,47,52],{"file":44,"lang":45,"caption":46,"region":28},"demo.html","html","A 12-column grid in a dozen lines",{"file":48,"lang":49,"caption":50,"region":51},"era.client.ts","typescript","Simulating device widths with an iframe","resize",{"file":53,"lang":54,"caption":55,"region":56},"era.css","css","A framework-style button group","btn-group",[58,61,64,67,70],{"label":59,"url":60},"Ethan Marcotte, “Responsive Web Design” (A List Apart, 2010)","https:\u002F\u002Falistapart.com\u002Farticle\u002Fresponsive-web-design\u002F",{"label":62,"url":63},"Responsive web design (Wikipedia)","https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FResponsive_web_design",{"label":65,"url":66},"Media Queries (W3C)","https:\u002F\u002Fwww.w3.org\u002FTR\u002Fcss3-mediaqueries\u002F",{"label":68,"url":69},"Viewport meta tag (MDN)","https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FHTML\u002FViewport_meta_tag",{"label":71,"url":72},"Bootstrap (front-end framework) (Wikipedia)","https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FBootstrap_(front-end_framework)",[74],"Developers tested by resizing the browser or on a drawer of real devices; here an iframe stands in for each device so its media queries respond to the frame width.","\u003Cdiv class=\"rw\">\n  \u003Cheader class=\"rw-head\">\n    \u003Cdiv class=\"rw-wrap\">\n      \u003Cp class=\"rw-kicker\">Device lab · 2013\u003C\u002Fp>\n      \u003Ch1>One site, every screen\u003C\u002Fh1>\n      \u003Cp class=\"rw-lead\">Below is \u003Cstrong>Hatchly\u003C\u002Fstrong>, an invented startup whose homepage is built the way thousands were between 2010 and 2015: a 12-column fluid grid, a few media queries and a navbar that folds into a hamburger. Pick a device width or drag the frame’s edge and watch the layout reflow.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n  \u003C\u002Fheader>\n\n  \u003Csection class=\"rw-lab\" aria-labelledby=\"rw-lab-h\">\n    \u003Cdiv class=\"rw-wrap\">\n      \u003Ch2 class=\"rw-sr\" id=\"rw-lab-h\">Resize the Hatchly homepage\u003C\u002Fh2>\n      \u003Cdiv class=\"rw-toolbar\" role=\"toolbar\" aria-label=\"Device width\">\n        \u003Cdiv class=\"rw-devices\">\n          \u003Cbutton type=\"button\" class=\"rw-dev\" data-w=\"320\" aria-pressed=\"false\">\u003Csvg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\u003Crect x=\"4\" y=\"1\" width=\"8\" height=\"14\" rx=\"1.5\"\u002F>\u003C\u002Fsvg>320 \u003Cspan>phone\u003C\u002Fspan>\u003C\u002Fbutton>\n          \u003Cbutton type=\"button\" class=\"rw-dev\" data-w=\"768\" aria-pressed=\"false\">\u003Csvg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\u003Crect x=\"2\" y=\"1\" width=\"12\" height=\"14\" rx=\"1.5\"\u002F>\u003C\u002Fsvg>768 \u003Cspan>tablet\u003C\u002Fspan>\u003C\u002Fbutton>\n          \u003Cbutton type=\"button\" class=\"rw-dev\" data-w=\"1024\" aria-pressed=\"true\">\u003Csvg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\u003Crect x=\"1\" y=\"3\" width=\"14\" height=\"9\" rx=\"1\"\u002F>\u003Cpath d=\"M0 13h16v1H0z\"\u002F>\u003C\u002Fsvg>1024 \u003Cspan>laptop\u003C\u002Fspan>\u003C\u002Fbutton>\n          \u003Cbutton type=\"button\" class=\"rw-dev\" data-w=\"1440\" aria-pressed=\"false\">\u003Csvg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\u003Crect x=\"0\" y=\"2\" width=\"16\" height=\"10\" rx=\"1\"\u002F>\u003Cpath d=\"M6 12h4v2H6zM4 14h8v1H4z\"\u002F>\u003C\u002Fsvg>1440 \u003Cspan>desktop\u003C\u002Fspan>\u003C\u002Fbutton>\n        \u003C\u002Fdiv>\n        \u003Clabel class=\"rw-gridtoggle\" data-trait=\"grid\">\u003Cinput type=\"checkbox\" id=\"rw-grid\"> Show 12-column grid\u003C\u002Flabel>\n        \u003Coutput class=\"rw-readout\" id=\"rw-readout\" aria-live=\"polite\">1024px · md\u003C\u002Foutput>\n      \u003C\u002Fdiv>\n\n      \u003Cdiv class=\"rw-ruler\" data-trait=\"breakpoints\" aria-hidden=\"true\">\n        \u003Cspan class=\"rw-bp\" style=\"--at: 0\">xs\u003C\u002Fspan>\n        \u003Cspan class=\"rw-bp\" style=\"--at: 768\">sm ≥768\u003C\u002Fspan>\n        \u003Cspan class=\"rw-bp\" style=\"--at: 992\">md ≥992\u003C\u002Fspan>\n        \u003Cspan class=\"rw-bp\" style=\"--at: 1200\">lg ≥1200\u003C\u002Fspan>\n        \u003Cspan class=\"rw-marker\" id=\"rw-marker\">\u003C\u002Fspan>\n      \u003C\u002Fdiv>\n\n      \u003Cdiv class=\"rw-stage\" id=\"rw-stage\">\n        \u003Cdiv class=\"rw-device\" id=\"rw-device\">\n          \u003Cdiv class=\"rw-chrome\" aria-hidden=\"true\">\u003Ci>\u003C\u002Fi>\u003Ci>\u003C\u002Fi>\u003Ci>\u003C\u002Fi>\u003Cspan>hatchly.example\u002F\u003C\u002Fspan>\u003C\u002Fdiv>\n          \u003Ciframe class=\"rw-frame\" id=\"rw-frame\" src=\"\u002Fdemos\u002Fresponsive\u002F\" title=\"Hatchly homepage, a responsive site from 2013\" loading=\"lazy\">\u003C\u002Fiframe>\n          \u003Cdiv class=\"rw-handle\" id=\"rw-handle\" role=\"slider\" tabindex=\"0\" data-keys=\"own\" aria-label=\"Frame width\" aria-valuemin=\"280\" aria-valuemax=\"1600\" aria-valuenow=\"1024\" aria-valuetext=\"1024 pixels\" hidden>\u003Cspan aria-hidden=\"true\">\u003C\u002Fspan>\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cp class=\"rw-note\">Drag the grip on the right edge, or focus it and use the arrow keys. Wide frames are shrunk to fit your screen; the page inside still thinks it is that wide.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n  \u003C\u002Fsection>\n\n  \u003Csection class=\"rw-notes\" aria-labelledby=\"rw-notes-h\">\n    \u003Cdiv class=\"rw-wrap\">\n      \u003Ch2 id=\"rw-notes-h\">What to look for\u003C\u002Fh2>\n      \u003Cdiv class=\"rw-cards\">\n        \u003Carticle class=\"rw-card\" data-trait=\"hamburger\">\n          \u003Ch3>The hamburger\u003C\u002Fh3>\n          \u003Cp>Under 768px the nav links fold behind three bars. Here it opens with a hidden checkbox and a \u003Ccode>:checked\u003C\u002Fcode> selector, so it works without JavaScript.\u003C\u002Fp>\n          \u003Cbutton type=\"button\" class=\"rw-try\" data-w=\"320\">Try at 320px\u003C\u002Fbutton>\n        \u003C\u002Farticle>\n        \u003Carticle class=\"rw-card\" data-trait=\"fluid\">\n          \u003Ch3>Fluid grid & images\u003C\u002Fh3>\n          \u003Cp>Columns are percentages (\u003Ccode>33.333%\u003C\u002Fcode>), not pixels, and images get \u003Ccode>max-width: 100%\u003C\u002Fcode> so they shrink with their column.\u003C\u002Fp>\n          \u003Cbutton type=\"button\" class=\"rw-try\" data-w=\"768\">Try at 768px\u003C\u002Fbutton>\n        \u003C\u002Farticle>\n        \u003Carticle class=\"rw-card\" data-trait=\"carousel\">\n          \u003Ch3>The hero carousel\u003C\u002Fh3>\n          \u003Cp>Every startup had one: three slides, arrows and little dots. Usability studies later showed almost nobody clicked past slide one.\u003C\u002Fp>\n          \u003Cbutton type=\"button\" class=\"rw-try\" data-w=\"1440\">Try at 1440px\u003C\u002Fbutton>\n        \u003C\u002Farticle>\n        \u003Carticle class=\"rw-card\" data-trait=\"mobile-first\">\n          \u003Ch3>Mobile first\u003C\u002Fh3>\n          \u003Cp>Styles start with the phone layout and use \u003Ccode>min-width\u003C\u002Fcode> queries to add columns as space appears, the approach Bootstrap 3 adopted in 2013.\u003C\u002Fp>\n          \u003Cbutton type=\"button\" class=\"rw-try\" data-w=\"1024\">Try at 1024px\u003C\u002Fbutton>\n        \u003C\u002Farticle>\n      \u003C\u002Fdiv>\n\n      \u003Cdetails class=\"rw-source\">\n        \u003Csummary>View source: the grid in 14 lines\u003C\u002Fsummary>\n\u003Cpre data-trait=\"viewport\">\u003Ccode><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n\n.container { margin: 0 auto; padding: 0 15px; }\n.row { margin: 0 -15px; }\n.row:after { content: \"\"; display: table; clear: both; }\n[class*=\"col-\"] { min-height: 1px; padding: 0 15px; }\n\n@media (min-width: 768px) {\n  .container { width: 750px; }\n  .col-sm-4 { float: left; width: 33.33333333%; }\n}\n@media (min-width: 992px) {\n  .container { width: 970px; }\n  .col-md-7 { float: left; width: 58.33333333%; }\n}\u003C\u002Fcode>\u003C\u002Fpre>\n      \u003C\u002Fdetails>\n\n      \u003Cblockquote class=\"rw-quote\">\n        \u003Cp>“Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience.”\u003C\u002Fp>\n        \u003Cfooter>Ethan Marcotte, “Responsive Web Design”, \u003Ccite>A List Apart\u003C\u002Fcite>, May 2010\u003C\u002Ffooter>\n      \u003C\u002Fblockquote>\n    \u003C\u002Fdiv>\n  \u003C\u002Fsection>\n\n  \u003Cfooter class=\"rw-foot\">\n    \u003Cdiv class=\"rw-wrap\">\n      \u003Cp>Hatchly is invented. The grid, buttons and navbar were written for this museum in the style of the frameworks of the day; no framework code is used.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n  \u003C\u002Ffooter>\n\u003C\u002Fdiv>\n","@layer era, shell, skin;\n@layer era {\n\u002F* Era 11: responsive design. The room is a framework-docs style \"device lab\" around an iframe. *\u002F\n[data-era=\"11\"] {\n  background: #f5f5f5;\n  color: #333;\n  font: 15px\u002F1.5 'Helvetica Neue', Helvetica, Arial, sans-serif;\n  overflow-x: clip;\n\n  .rw-wrap {\n    max-width: 1170px;\n    margin: 0 auto;\n    padding: 0 16px;\n    box-sizing: border-box;\n  }\n  .rw-sr {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    clip-path: inset(50%);\n  }\n  code {\n    font: 0.9em Menlo, Monaco, Consolas, 'Courier New', monospace;\n    color: #c7254e;\n    background: #f9f2f4;\n    padding: 1px 4px;\n    border-radius: 4px;\n  }\n  :focus-visible {\n    outline: 3px solid #66afe9;\n    outline-offset: 2px;\n  }\n\n  .rw-head {\n    padding: 40px 0 30px;\n    color: #fff;\n    background: linear-gradient(135deg, #4b3a7a, #2a4f7a);\n    text-shadow: 0 1px 0 rgb(0 0 0 \u002F 0.25);\n  }\n  .rw-kicker {\n    margin: 0;\n    text-transform: uppercase;\n    letter-spacing: 0.12em;\n    font-size: 12px;\n    color: #d6cdf0;\n  }\n  .rw-head h1 {\n    margin: 6px 0 10px;\n    font-size: clamp(32px, 6vw, 56px);\n    font-weight: 300;\n    line-height: 1.05;\n  }\n  .rw-lead {\n    max-width: 760px;\n    margin: 0;\n    font-size: 18px;\n    font-weight: 300;\n    color: #eee8ff;\n  }\n\n  .rw-lab { padding: 24px 0 8px; }\n  .rw-toolbar {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 12px 20px;\n    align-items: center;\n    margin-bottom: 10px;\n  }\n  .rw-devices {\n    display: inline-flex;\n    flex-wrap: wrap;\n  }\n  .rw-dev {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 6px 12px;\n    font: inherit;\n    font-size: 14px;\n    color: #333;\n    background: linear-gradient(#fff, #e0e0e0);\n    border: 1px solid #ccc;\n    margin-left: -1px;\n    text-shadow: 0 1px 0 #fff;\n    cursor: pointer;\n  }\n  .rw-dev:first-child { border-radius: 4px 0 0 4px; margin-left: 0; }\n  .rw-dev:last-child { border-radius: 0 4px 4px 0; }\n  .rw-dev[aria-pressed='true'] {\n    background: #e0e0e0;\n    box-shadow: inset 0 3px 5px rgb(0 0 0 \u002F 0.125);\n    border-color: #adadad;\n  }\n  .rw-dev svg { width: 16px; height: 16px; fill: #555; }\n  .rw-dev span { color: #737373; font-size: 12px; }\n  .rw-gridtoggle { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }\n  .rw-readout {\n    margin-left: auto;\n    font: 600 14px Menlo, Monaco, Consolas, monospace;\n    color: #fff;\n    background: #4b3a7a;\n    padding: 3px 10px;\n    border-radius: 10px;\n  }\n\n  .rw-ruler {\n    --scale: 1;\n    position: relative;\n    height: 22px;\n    margin-bottom: 4px;\n    border-bottom: 1px solid #ccc;\n    font: 11px Menlo, Monaco, Consolas, monospace;\n    color: #555;\n    overflow: hidden;\n  }\n  .rw-bp {\n    position: absolute;\n    bottom: 0;\n    left: calc(var(--at) * 1px * var(--scale));\n    padding: 0 4px 2px;\n    border-left: 2px solid #d9534f;\n    white-space: nowrap;\n  }\n  .rw-marker {\n    position: absolute;\n    bottom: -1px;\n    left: 0;\n    height: 4px;\n    width: var(--w, 100%);\n    background: #5cb85c;\n  }\n\n  .rw-stage {\n    position: relative;\n    overflow: hidden;\n    padding: 0 0 4px;\n  }\n  .rw-device {\n    position: relative;\n    width: 100%;\n    background: #fff;\n    border: 1px solid #bbb;\n    border-radius: 6px 6px 0 0;\n    box-shadow: 0 8px 24px rgb(0 0 0 \u002F 0.15);\n    transform-origin: 0 0;\n  }\n  .rw-chrome {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    height: 28px;\n    padding: 0 10px;\n    background: linear-gradient(#f1f1f1, #dcdcdc);\n    border-bottom: 1px solid #bbb;\n    border-radius: 6px 6px 0 0;\n    overflow: hidden;\n  }\n  .rw-chrome i { width: 10px; height: 10px; border-radius: 50%; background: #c8c8c8; flex: none; }\n  .rw-chrome i:first-child { background: #ec6a5e; }\n  .rw-chrome i:nth-child(2) { background: #f4bf4f; }\n  .rw-chrome i:nth-child(3) { background: #61c554; }\n  .rw-chrome span {\n    flex: 1;\n    min-width: 0;\n    margin-left: 8px;\n    padding: 1px 8px;\n    font-size: 12px;\n    color: #555;\n    background: #fff;\n    border: 1px solid #c8c8c8;\n    border-radius: 4px;\n    white-space: nowrap;\n    overflow: hidden;\n  }\n  .rw-frame {\n    display: block;\n    width: 100%;\n    height: 620px;\n    border: 0;\n    background: #fff;\n  }\n  .rw-handle {\n    position: absolute;\n    top: 0;\n    right: -18px;\n    bottom: 0;\n    width: 16px;\n    display: grid;\n    place-items: center;\n    background: #ddd;\n    border: 1px solid #bbb;\n    border-radius: 0 6px 6px 0;\n    cursor: ew-resize;\n    touch-action: none;\n  }\n  .rw-handle span {\n    width: 4px;\n    height: 40px;\n    border-left: 2px dotted #777;\n    border-right: 2px dotted #777;\n  }\n  .rw-handle:hover,\n  .rw-handle:focus-visible { background: #c8c8c8; }\n  .rw-stage.is-dragging .rw-frame { pointer-events: none; }\n  .rw-note { font-size: 13px; color: #6a6a6a; margin: 8px 0 0; }\n\n  .rw-notes { padding: 20px 0 30px; }\n  .rw-notes h2 { font-size: 28px; font-weight: 400; margin: 10px 0 16px; }\n  .rw-cards {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));\n    gap: 20px;\n  }\n  .rw-card {\n    padding: 16px 18px;\n    background: #fff;\n    border: 1px solid #ddd;\n    border-left: 4px solid #4b3a7a;\n    border-radius: 4px;\n  }\n  .rw-card h3 { margin: 0 0 6px; font-size: 18px; font-weight: 500; }\n  .rw-card p { margin: 0 0 12px; font-size: 14px; }\n  .rw-try {\n    font: inherit;\n    font-size: 13px;\n    padding: 4px 10px;\n    color: #fff;\n    background: linear-gradient(#428bca, #2d6ca2);\n    border: 1px solid #2b669a;\n    border-radius: 3px;\n    cursor: pointer;\n  }\n  .rw-source {\n    margin: 22px 0;\n    background: #fff;\n    border: 1px solid #ddd;\n    border-radius: 4px;\n  }\n  .rw-source summary { padding: 10px 14px; cursor: pointer; font-weight: 500; }\n  .rw-source pre {\n    margin: 0;\n    padding: 14px;\n    overflow-x: auto;\n    background: #f7f7f9;\n    border-top: 1px solid #e1e1e8;\n    font: 13px\u002F1.5 Menlo, Monaco, Consolas, monospace;\n  }\n  .rw-source pre code { background: none; color: #333; padding: 0; }\n  .rw-quote {\n    margin: 0;\n    padding: 6px 20px;\n    border-left: 5px solid #eee;\n    font-size: 17px;\n    font-weight: 300;\n  }\n  .rw-quote p { margin: 0 0 6px; }\n  .rw-quote footer { font-size: 14px; color: #6a6a6a; }\n  .rw-quote footer::before { content: '\\2014 \\00A0'; }\n\n  .rw-foot {\n    padding: 20px 0;\n    border-top: 1px solid #e5e5e5;\n    color: #6a6a6a;\n    font-size: 13px;\n  }\n\n  @media (max-width: 600px) {\n    .rw-dev span { display: none; }\n    .rw-readout { margin-left: 0; }\n    .rw-frame { height: 560px; }\n  }\n}\n\n}","@layer era, shell, skin;\n@layer skin {\n\u002F* Era 11 time bar skin: a dark \"navbar-inverse\" with button-group notches. *\u002F\nhtml[data-era-page=\"11\"] .timebar {\n  --tb-bg: #222222;\n  --tb-fg: #ffffff;\n  --tb-muted: #b0b0b0;\n  --tb-accent: #5cb85c;\n  --tb-accent-fg: #0b1f0b;\n  --tb-notch: #4a4a4a;\n  --tb-btn-bg: linear-gradient(#3c3c3c, #222);\n  --tb-btn-border: 1px solid #080808;\n  --tb-btn-radius: 4px;\n  --tb-font: 'Helvetica Neue', Helvetica, Arial, sans-serif;\n  --tb-shadow: 0 -1px 0 #080808;\n  background: linear-gradient(#3c3c3c, #222);\n}\nhtml[data-era-page=\"11\"] .timebar__notch {\n  border-radius: 4px;\n}\nhtml[data-era-page=\"11\"] .timebar__btn--curator {\n  grid-auto-flow: column;\n}\nhtml[data-era-page=\"11\"] .timebar__btn--curator::before {\n  content: '';\n  display: inline-block;\n  width: 12px;\n  height: 2px;\n  margin-right: 6px;\n  vertical-align: middle;\n  background: currentColor;\n  box-shadow: 0 -4px 0 currentColor, 0 4px 0 currentColor;\n}\n\n}",[79,81,83],{"caption":46,"file":44,"html":80},"\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\">pre\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> data-trait\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"viewport\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">code\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"><\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">.container { margin: 0 auto; padding: 0 15px; }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">.row { margin: 0 -15px; }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">.row:after { content: \"\"; display: table; clear: both; }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">[class*=\"col-\"] { min-height: 1px; padding: 0 15px; }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">@media (min-width: 768px) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  .container { width: 750px; }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  .col-sm-4 { float: left; width: 33.33333333%; }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">@media (min-width: 992px) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  .container { width: 970px; }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  .col-md-7 { float: left; width: 58.33333333%; }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">}<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">code\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">pre\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"caption":50,"file":48,"html":82},"\u003Cpre class=\"shiki github-dark-dimmed\" style=\"background-color:#22272e;color:#adbac7\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#F47067\">function\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\"> tier\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#F69D50\">w\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">:\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> number\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F47067\">  return\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> w \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">>=\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 1200\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"> ?\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\"> 'lg'\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"> :\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> w \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">>=\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 992\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"> ?\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\"> 'md'\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"> :\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> w \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">>=\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 768\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"> ?\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\"> 'sm'\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"> :\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\"> 'xs'\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F47067\">function\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\"> setWidth\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#F69D50\">w\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">:\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> number\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  width \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">=\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> Math.\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">round\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(Math.\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">max\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">MIN\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, Math.\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">min\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">MAX\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, w)))\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F47067\">  const\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> room\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> stage.clientWidth \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">-\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> GRIP\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F47067\">  const\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> scale\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> Math.\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">min\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">1\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, room \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> width) \u003C\u002Fspan>\u003Cspan style=\"color:#768390\">\u002F\u002F shrink big \"screens\" to fit, like a zoomed-out browser\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  device.style.width \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\"> `${\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">width\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">}px`\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  device.style.transform \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">=\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> scale \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"><\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 1\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"> ?\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\"> `scale(${\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">scale\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">})`\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"> :\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\"> ''\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  stage.style.height \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\"> `${\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">device\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">.\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">offsetHeight\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"> *\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> scale\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"> +\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 6\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">}px`\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  ruler.style.\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">setProperty\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">'--scale'\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">String\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(scale))\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  ruler.style.\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">setProperty\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">'--w'\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">`${\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">width\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"> *\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> scale\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">}px`\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  readout.textContent \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\"> `${\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">width\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">}px · ${\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">tier\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">(\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">width\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">)\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">}${\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">scale\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"> <\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 1\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"> ?\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\"> ` · shown at ${\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">Math\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">.\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">round\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">(\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">scale\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"> *\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 100\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">)\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">}%`\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"> :\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\"> ''}`\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  handle.\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">setAttribute\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">'aria-valuenow'\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">String\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(width))\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  handle.\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">setAttribute\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">'aria-valuetext'\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">`${\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">width\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">} pixels`\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  devButtons.\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">forEach\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">((\u003C\u002Fspan>\u003Cspan style=\"color:#F69D50\">b\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">) \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">=>\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> b.\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">setAttribute\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">'aria-pressed'\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">String\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">Number\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(b.dataset.w) \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">===\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> width)))\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">}\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"caption":55,"file":53,"html":84},"\u003Cpre class=\"shiki github-dark-dimmed\" style=\"background-color:#22272e;color:#adbac7\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">.rw-dev\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\">inline-flex\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  align-items\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">center\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  gap\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">6\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\">6\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">px\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:#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\">14\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\">#333\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\">linear-gradient\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">#fff\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">#e0e0e0\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\">1\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">px\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> solid\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> #ccc\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  margin-left\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:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  text-shadow\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">0\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 1\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">px\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 0\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> #fff\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  cursor\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">pointer\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:#6CB6FF\">.rw-dev:first-child\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> { \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">border-radius\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:#6CB6FF\"> 0\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 0\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 4\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">px\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">; \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">margin-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\">.rw-dev:last-child\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> { \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">border-radius\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">0\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 4\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">px\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 4\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\">.rw-dev\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">[\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">aria-pressed\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">'true'\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\">#e0e0e0\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  box-shadow\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">inset\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 0\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 3\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">px\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 5\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">px\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.125\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  border-color\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">#adadad\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>",1791223398959]