[{"data":1,"prerenderedAt":93},["ShallowReactive",2],{"room:10-skeuomorphism":3},{"path":4,"meta":5,"html":82,"css":83,"snippets":84},"10-skeuomorphism",{"id":6,"slug":4,"title":7,"years":8,"summary":9,"context":10,"traits":14,"tech":39,"thenVsNow":44,"snippets":45,"sources":63,"cta":76,"recreated":79},"10","Skeuomorphism & texture","2007–2013","When touchscreens arrived, interfaces borrowed the look of real objects so people knew what to tap: stitched leather, torn paper, brass switches and glossy app icons.",{"screens":11,"connection":12,"browsers":13},"The 3.5-inch 320×480 iPhone, then 1024×768 tablets, then the first 2× “retina” displays (2010)","Home broadband and 3G; image sprites and CSS3 gradients replaced sliced background JPEGs","Mobile Safari and Android WebKit, Safari 4–6, Chrome, Firefox 3.5–4; IE8 still needed fallback PNGs",[15,18,21,24,27,30,33,36],{"id":16,"label":17},"texture","Linen, wood and leather textures",{"id":19,"label":20},"stitch","Stitched leather with dashed “thread” borders",{"id":22,"label":23},"letterpress","Letterpress text with inset text-shadow",{"id":25,"label":26},"gloss","Glossy, rounded app icon with a highlight sheen",{"id":28,"label":29},"paper","Paper cards with torn, deckled edges",{"id":31,"label":32},"script","Handwritten script fonts",{"id":34,"label":35},"curl","Page-curl corner",{"id":37,"label":38},"controls","Physical-looking switches, keys and knobs",[40,41,42,43],"CSS3 gradients, box-shadow, text-shadow and border-radius (2009–2011) replacing sliced images","Tiling noise textures, here generated with an SVG feTurbulence filter in a data URI","Retina-ready @2x image sprites and, later, icon fonts","Dashed borders and outline-offset faking stitched thread","iOS 7 (2013) stripped the leather and linen for flat colour; the idea survives as subtle depth in Material shadows and neumorphism experiments.",[46,51,53,58],{"file":47,"lang":48,"caption":49,"region":50},"era.css","css","Stitched leather: a dashed border inside a gradient","leather",{"file":47,"lang":48,"caption":52,"region":22},"Letterpress: one light shadow below, one dark above",{"file":54,"lang":55,"caption":56,"region":57},"demo.html","html","A glossy app icon drawn in SVG","icon",{"file":59,"lang":60,"caption":61,"region":62},"era.client.ts","typescript","A dimmer knob mapped to a 270° sweep","knob",[64,67,70,73],{"label":65,"url":66},"Skeuomorph (Wikipedia)","https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FSkeuomorph",{"label":68,"url":69},"iOS 7 (Wikipedia)","https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FIOS_7",{"label":71,"url":72},"text-shadow (MDN)","https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002Ftext-shadow",{"label":74,"url":75},"\u003CfeTurbulence> (MDN)","https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FSVG\u002FElement\u002FfeTurbulence",{"next":77,"prev":78},"Turn the page","Leaf back",[80,81],"Period sites used tiled PNG\u002FJPEG textures; here the grain is generated by an SVG noise filter so the room ships no image files.","The torn paper edge is a CSS mask; at the time it was usually a transparent PNG border image.","\u003Cdiv class=\"lq\" id=\"lq\">\n  \u003Cheader class=\"lq-top\" data-trait=\"texture\">\n    \u003Cdiv class=\"lq-top__inner\">\n      \u003Csvg class=\"lq-icon\" data-trait=\"gloss\" viewBox=\"0 0 120 120\" width=\"96\" height=\"96\" role=\"img\" aria-label=\"Ledger & Quill app icon: a stitched leather journal with a quill\">\n        \u003Cdefs>\n          \u003ClinearGradient id=\"lq-leather\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n            \u003Cstop offset=\"0\" stop-color=\"#9a5a34\"\u002F>\u003Cstop offset=\"1\" stop-color=\"#4a2412\"\u002F>\n          \u003C\u002FlinearGradient>\n          \u003ClinearGradient id=\"lq-gloss\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n            \u003Cstop offset=\"0\" stop-color=\"#fff\" stop-opacity=\".55\"\u002F>\u003Cstop offset=\"1\" stop-color=\"#fff\" stop-opacity=\".05\"\u002F>\n          \u003C\u002FlinearGradient>\n          \u003ClinearGradient id=\"lq-feather\" x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\">\n            \u003Cstop offset=\"0\" stop-color=\"#fffdf5\"\u002F>\u003Cstop offset=\"1\" stop-color=\"#c9bfa6\"\u002F>\n          \u003C\u002FlinearGradient>\n        \u003C\u002Fdefs>\n        \u003Crect x=\"4\" y=\"4\" width=\"112\" height=\"112\" rx=\"26\" fill=\"url(#lq-leather)\"\u002F>\n        \u003Crect x=\"12\" y=\"12\" width=\"96\" height=\"96\" rx=\"19\" fill=\"none\" stroke=\"#f3d9b5\" stroke-opacity=\".75\" stroke-width=\"2\" stroke-dasharray=\"5 4\"\u002F>\n        \u003Cpath d=\"M84 22c-18 6-34 26-44 58l4 2c8-14 16-24 26-30-6 0-10 0-14-1 10-4 18-10 24-18-6 1-10 1-14 0 8-3 14-6 18-11z\" fill=\"url(#lq-feather)\" stroke=\"#6b5a3e\" stroke-width=\"1\"\u002F>\n        \u003Cpath d=\"M40 80l-6 14 9-11\" fill=\"#1e140c\"\u002F>\n        \u003Cpath d=\"M4 30C4 16 16 4 30 4h60c14 0 26 12 26 26v22C82 62 40 62 4 52z\" fill=\"url(#lq-gloss)\"\u002F>\n      \u003C\u002Fsvg>\n      \u003Cdiv class=\"lq-brand\">\n        \u003Ch1 class=\"lq-title\" data-trait=\"letterpress\">Ledger \u003Cspan>&\u003C\u002Fspan> Quill\u003C\u002Fh1>\n        \u003Cp class=\"lq-tag\">The journal you’ll actually want to hold. For iPad, iPhone & Mac.\u003C\u002Fp>\n        \u003Cp class=\"era-stamp\">\u003Cspan class=\"era-stamp__no\">Era 10\u002F17\u003C\u002Fspan> \u003Cspan class=\"era-stamp__years\">2007–2013\u003C\u002Fspan> \u003Cspan class=\"era-stamp__title\">Skeuomorphism & texture\u003C\u002Fspan>\u003C\u002Fp>\n      \u003C\u002Fdiv>\n      \u003Ca class=\"lq-buy\" href=\"#lq-desk\">\n        \u003Cspan class=\"lq-buy__small\">Available now\u003C\u002Fspan>\n        \u003Cspan class=\"lq-buy__big\">Download — $4.99\u003C\u002Fspan>\n      \u003C\u002Fa>\n    \u003C\u002Fdiv>\n  \u003C\u002Fheader>\n\n  \u003Cnav class=\"lq-nav\" data-trait=\"stitch\" aria-label=\"Ledger & Quill\">\n    \u003Cul>\n      \u003Cli>\u003Ca href=\"#lq-desk\" aria-current=\"page\">Journal\u003C\u002Fa>\u003C\u002Fli>\n      \u003Cli>\u003Ca href=\"#lq-features\">Features\u003C\u002Fa>\u003C\u002Fli>\n      \u003Cli>\u003Ca href=\"#lq-praise\">Praise\u003C\u002Fa>\u003C\u002Fli>\n      \u003Cli>\u003Ca href=\"#lq-foot\">Support\u003C\u002Fa>\u003C\u002Fli>\n    \u003C\u002Ful>\n  \u003C\u002Fnav>\n\n  \u003Csection class=\"lq-desk\" id=\"lq-desk\" aria-labelledby=\"lq-desk-h\">\n    \u003Ch2 class=\"lq-visually-hidden\" id=\"lq-desk-h\">Try the journal\u003C\u002Fh2>\n\n    \u003Cdiv class=\"lq-book\" data-trait=\"stitch\">\n      \u003Cdiv class=\"lq-page lq-page--left\">\n        \u003Cp class=\"lq-date\" data-trait=\"script\">Tuesday, the 4th of October\u003C\u002Fp>\n        \u003Cform class=\"lq-note\" id=\"lq-note\">\n          \u003Clabel for=\"lq-text\" class=\"lq-label\">Dear journal…\u003C\u002Flabel>\n          \u003Ctextarea id=\"lq-text\" name=\"note\" rows=\"7\" maxlength=\"160\" spellcheck=\"false\">Picked up fresh espresso beans. Remember to call Grandma on Sunday!\u003C\u002Ftextarea>\n          \u003Cdiv class=\"lq-note__actions\">\n            \u003Cbutton type=\"submit\" class=\"lq-key lq-key--brass\">Tear off & pin\u003C\u002Fbutton>\n            \u003Cbutton type=\"reset\" class=\"lq-key\">Erase\u003C\u002Fbutton>\n          \u003C\u002Fdiv>\n        \u003C\u002Fform>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"lq-page lq-page--right\" data-trait=\"curl\">\n        \u003Ch3 class=\"lq-script-h\">Pinned to the desk\u003C\u002Fh3>\n        \u003Cul class=\"lq-stickies\" id=\"lq-stickies\" aria-live=\"polite\">\n          \u003Cli class=\"lq-sticky lq-sticky--yellow\">Buy moleskin-ish notebook refills\u003C\u002Fli>\n          \u003Cli class=\"lq-sticky lq-sticky--blue\">Ideas: a recipe ledger? ✿\u003C\u002Fli>\n        \u003C\u002Ful>\n        \u003Cp class=\"lq-hint\">Write a note on the left page, then tear it off. Your notes stay on this desk (in this browser).\u003C\u002Fp>\n        \u003Cnav class=\"era-cta\" aria-label=\"Travel through time\">\u003Ca class=\"era-cta__next\" rel=\"next\" href=\"\u002Feras\u002F11-responsive\u002F\">\u003Cspan class=\"era-cta__label\">Turn the page\u003C\u002Fspan> \u003Cspan class=\"era-cta__to\">2010–2015 · Responsive & grid frameworks\u003C\u002Fspan>\u003C\u002Fa> \u003Ca class=\"era-cta__prev\" rel=\"prev\" href=\"\u002Feras\u002F09-web-2-0\u002F\">\u003Cspan class=\"era-cta__label\">Leaf back\u003C\u002Fspan> \u003Cspan class=\"era-cta__to\">2005–2009 · Web 2.0 gloss\u003C\u002Fspan>\u003C\u002Fa>\u003C\u002Fnav>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\n    \u003Caside class=\"lq-lamp\" aria-label=\"Desk lamp controls\">\n      \u003Csvg class=\"lq-lamp__art\" viewBox=\"0 0 160 200\" width=\"150\" height=\"188\" aria-hidden=\"true\">\n        \u003Cdefs>\n          \u003ClinearGradient id=\"lq-brass\" x1=\"0\" y1=\"0\" x2=\"1\" y2=\"0\">\n            \u003Cstop offset=\"0\" stop-color=\"#7a5a1c\"\u002F>\u003Cstop offset=\".45\" stop-color=\"#f4d77a\"\u002F>\u003Cstop offset=\"1\" stop-color=\"#8a6420\"\u002F>\n          \u003C\u002FlinearGradient>\n          \u003ClinearGradient id=\"lq-shade\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n            \u003Cstop offset=\"0\" stop-color=\"#2f6b3c\"\u002F>\u003Cstop offset=\"1\" stop-color=\"#13361c\"\u002F>\n          \u003C\u002FlinearGradient>\n        \u003C\u002Fdefs>\n        \u003Cellipse cx=\"80\" cy=\"190\" rx=\"52\" ry=\"9\" fill=\"url(#lq-brass)\"\u002F>\n        \u003Crect x=\"76\" y=\"70\" width=\"8\" height=\"118\" fill=\"url(#lq-brass)\"\u002F>\n        \u003Cpath d=\"M30 40 Q80 -6 130 40 L140 70 H20 Z\" fill=\"url(#lq-shade)\"\u002F>\n        \u003Cpath d=\"M40 34 Q80 8 120 34\" fill=\"none\" stroke=\"#fff\" stroke-opacity=\".35\" stroke-width=\"4\" stroke-linecap=\"round\"\u002F>\n        \u003Crect x=\"18\" y=\"68\" width=\"124\" height=\"6\" rx=\"3\" fill=\"url(#lq-brass)\"\u002F>\n        \u003Cellipse class=\"lq-bulb\" cx=\"80\" cy=\"78\" rx=\"38\" ry=\"6\" fill=\"#fff6c8\"\u002F>\n      \u003C\u002Fsvg>\n      \u003Cdiv class=\"lq-plate\">\n        \u003Clabel class=\"lq-switch\" data-trait=\"controls\">\n          \u003Cinput type=\"checkbox\" id=\"lq-lamp\" role=\"switch\" checked>\n          \u003Cspan class=\"lq-switch__track\" aria-hidden=\"true\">\u003Cspan class=\"lq-switch__lever\">\u003C\u002Fspan>\u003C\u002Fspan>\n          \u003Cspan class=\"lq-switch__label\">Lamp\u003C\u002Fspan>\n        \u003C\u002Flabel>\n        \u003Cdiv class=\"lq-knob-wrap\">\n          \u003Cdiv class=\"lq-knob\" id=\"lq-knob\" role=\"slider\" tabindex=\"0\" data-keys=\"own\" aria-label=\"Lamp dimmer\" aria-valuemin=\"20\" aria-valuemax=\"100\" aria-valuenow=\"100\" aria-valuetext=\"100 percent\">\n            \u003Cspan class=\"lq-knob__mark\" aria-hidden=\"true\">\u003C\u002Fspan>\n          \u003C\u002Fdiv>\n          \u003Cspan class=\"lq-switch__label\" aria-hidden=\"true\">Dimmer\u003C\u002Fspan>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Faside>\n  \u003C\u002Fsection>\n\n  \u003Csection class=\"lq-features\" id=\"lq-features\" aria-labelledby=\"lq-feat-h\">\n    \u003Ch2 id=\"lq-feat-h\" class=\"lq-section-h\" data-trait=\"letterpress\">Crafted like the real thing\u003C\u002Fh2>\n    \u003Cdiv class=\"lq-cards\">\n      \u003Carticle class=\"lq-card\" data-trait=\"paper\">\n        \u003Csvg viewBox=\"0 0 64 64\" width=\"64\" height=\"64\" aria-hidden=\"true\">\n          \u003Cdefs>\u003ClinearGradient id=\"lq-lock\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\u003Cstop offset=\"0\" stop-color=\"#f6dc86\"\u002F>\u003Cstop offset=\"1\" stop-color=\"#9c7322\"\u002F>\u003C\u002FlinearGradient>\u003C\u002Fdefs>\n          \u003Cpath d=\"M20 30V20a12 12 0 0 1 24 0v10\" fill=\"none\" stroke=\"#9aa0a6\" stroke-width=\"6\"\u002F>\n          \u003Cpath d=\"M20 30V20a12 12 0 0 1 24 0v10\" fill=\"none\" stroke=\"#e8ecef\" stroke-width=\"2\"\u002F>\n          \u003Crect x=\"12\" y=\"28\" width=\"40\" height=\"30\" rx=\"5\" fill=\"url(#lq-lock)\" stroke=\"#6b4e14\"\u002F>\n          \u003Ccircle cx=\"32\" cy=\"41\" r=\"4\" fill=\"#3b2a08\"\u002F>\u003Crect x=\"30\" y=\"42\" width=\"4\" height=\"9\" fill=\"#3b2a08\"\u002F>\n          \u003Crect x=\"14\" y=\"30\" width=\"36\" height=\"8\" rx=\"3\" fill=\"#fff\" opacity=\".35\"\u002F>\n        \u003C\u002Fsvg>\n        \u003Ch3>A brass clasp lock\u003C\u002Fh3>\n        \u003Cp>Spin the combination dial to open your private pages. Nobody peeks. Not even your little brother.\u003C\u002Fp>\n      \u003C\u002Farticle>\n      \u003Carticle class=\"lq-card\" data-trait=\"paper\">\n        \u003Csvg viewBox=\"0 0 64 64\" width=\"64\" height=\"64\" aria-hidden=\"true\">\n          \u003Cdefs>\u003ClinearGradient id=\"lq-calc\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\u003Cstop offset=\"0\" stop-color=\"#fdfdfb\"\u002F>\u003Cstop offset=\"1\" stop-color=\"#cfcabc\"\u002F>\u003C\u002FlinearGradient>\u003C\u002Fdefs>\n          \u003Crect x=\"8\" y=\"10\" width=\"48\" height=\"46\" rx=\"9\" fill=\"#8a8578\"\u002F>\n          \u003Crect x=\"8\" y=\"8\" width=\"48\" height=\"44\" rx=\"9\" fill=\"url(#lq-calc)\" stroke=\"#7a7466\"\u002F>\n          \u003Crect x=\"12\" y=\"10\" width=\"40\" height=\"14\" rx=\"6\" fill=\"#fff\" opacity=\".7\"\u002F>\n          \u003Ctext x=\"32\" y=\"40\" text-anchor=\"middle\" font-family=\"Helvetica, Arial, sans-serif\" font-weight=\"bold\" font-size=\"22\" fill=\"#4a463c\">+\u003C\u002Ftext>\n        \u003C\u002Fsvg>\n        \u003Ch3>A ledger that adds up\u003C\u002Fh3>\n        \u003Cp>Jot down what you spent on the green cloth ledger page. Tap the big chunky keys and the totals tally themselves.\u003C\u002Fp>\n      \u003C\u002Farticle>\n      \u003Carticle class=\"lq-card\" data-trait=\"paper\">\n        \u003Csvg viewBox=\"0 0 64 64\" width=\"64\" height=\"64\" aria-hidden=\"true\">\n          \u003Cdefs>\u003ClinearGradient id=\"lq-ribbon\" x1=\"0\" y1=\"0\" x2=\"1\" y2=\"0\">\u003Cstop offset=\"0\" stop-color=\"#7d1420\"\u002F>\u003Cstop offset=\".5\" stop-color=\"#c8323f\"\u002F>\u003Cstop offset=\"1\" stop-color=\"#7d1420\"\u002F>\u003C\u002FlinearGradient>\u003C\u002Fdefs>\n          \u003Crect x=\"10\" y=\"6\" width=\"44\" height=\"52\" rx=\"3\" fill=\"#e9dfc4\" stroke=\"#a89466\"\u002F>\n          \u003Cpath d=\"M16 16h32M16 24h32M16 32h22\" stroke=\"#9fb5c8\" stroke-width=\"2\"\u002F>\n          \u003Cpath d=\"M38 2h12v52l-6-6-6 6z\" fill=\"url(#lq-ribbon)\"\u002F>\n        \u003C\u002Fsvg>\n        \u003Ch3>Ribbon bookmarks\u003C\u002Fh3>\n        \u003Cp>Silk ribbons keep your place on every device, carried there by Cloud Courier sync. Turn the page with a swipe.\u003C\u002Fp>\n      \u003C\u002Farticle>\n    \u003C\u002Fdiv>\n  \u003C\u002Fsection>\n\n  \u003Csection class=\"lq-praise\" id=\"lq-praise\" aria-labelledby=\"lq-praise-h\">\n    \u003Ch2 id=\"lq-praise-h\" class=\"lq-section-h\" data-trait=\"letterpress\">Kind words\u003C\u002Fh2>\n    \u003Cfigure class=\"lq-quote\">\n      \u003Cblockquote>\u003Cp>“So convincing I tried to smell the leather.”\u003C\u002Fp>\u003C\u002Fblockquote>\n      \u003Cfigcaption>— Pocket Gadget Monthly, ★★★★★\u003C\u002Ffigcaption>\n    \u003C\u002Ffigure>\n    \u003Cfigure class=\"lq-quote lq-quote--tilt\">\n      \u003Cblockquote>\u003Cp>“The page-turn alone is worth five bucks.”\u003C\u002Fp>\u003C\u002Fblockquote>\n      \u003Cfigcaption>— The Daily Tapper\u003C\u002Ffigcaption>\n    \u003C\u002Ffigure>\n    \u003Cdiv class=\"lq-badge\" aria-label=\"Staff favorite 2011\">\u003Cspan>Staff\u003Cbr>Favorite\u003C\u002Fspan>\u003Csmall>2011\u003C\u002Fsmall>\u003C\u002Fdiv>\n  \u003C\u002Fsection>\n\n  \u003Cfooter class=\"lq-foot\" id=\"lq-foot\">\n    \u003Cp class=\"lq-foot__brand\" data-trait=\"letterpress\">Ledger & Quill Co.\u003C\u002Fp>\n    \u003Cp>Hand-stitched in Portland, Oregon · \u003Ca href=\"#lq\">Support\u003C\u002Fa> · \u003Ca href=\"#lq\">Press kit\u003C\u002Fa> · \u003Ca href=\"#lq\">Follow @ledgerquill\u003C\u002Fa>\u003C\u002Fp>\n    \u003Cp class=\"lq-foot__fine\">© 2011 Ledger & Quill Co. All pages reserved. Requires iOS 4.3 or later.\u003C\u002Fp>\n  \u003C\u002Ffooter>\n\u003C\u002Fdiv>\n","@layer era, shell;\n@layer era {\n\u002F* Era 10: skeuomorphism. Leather, linen, wood, paper and brass, all from gradients and SVG noise. *\u002F\n[data-era=\"10\"] {\n  --lq-noise: url(\"data:image\u002Fsvg+xml,%3Csvg xmlns='http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'\u002F%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .35 0'\u002F%3E%3C\u002Ffilter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'\u002F%3E%3C\u002Fsvg%3E\");\n  --lq-grain: url(\"data:image\u002Fsvg+xml,%3Csvg xmlns='http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg' width='600' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.004 .18' numOctaves='4'\u002F%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .1 0 0 0 0 .03 0 0 0 .55 0'\u002F%3E%3C\u002Ffilter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'\u002F%3E%3C\u002Fsvg%3E\");\n  --lq-lamp: var(--lq-dim, 1);\n  background:\n    var(--lq-grain),\n    repeating-linear-gradient(90deg, rgb(0 0 0 \u002F 0.06) 0 2px, transparent 2px 140px),\n    linear-gradient(180deg, #8b5a2b, #6b3f1d 60%, #5a3317);\n  color: #3b2a1a;\n  font-family: Georgia, 'Times New Roman', serif;\n  overflow-x: clip;\n\n  .lq {\n    max-width: 1040px;\n    margin: 0 auto;\n    padding: 24px 16px 40px;\n    box-sizing: border-box;\n  }\n  a { color: #7a2e12; }\n\n  .lq-visually-hidden {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    clip-path: inset(50%);\n    white-space: nowrap;\n  }\n\n  \u002F* Linen header *\u002F\n  .lq-top {\n    background:\n      var(--lq-noise),\n      repeating-linear-gradient(0deg, rgb(255 255 255 \u002F 0.07) 0 1px, transparent 1px 3px),\n      repeating-linear-gradient(90deg, rgb(0 0 0 \u002F 0.05) 0 1px, transparent 1px 3px),\n      linear-gradient(#e9e2d0, #d6ccb4);\n    border-radius: 10px 10px 0 0;\n    box-shadow: inset 0 1px 0 rgb(255 255 255 \u002F 0.8), 0 3px 12px rgb(0 0 0 \u002F 0.5);\n    padding: 22px 24px;\n  }\n  .lq-top__inner {\n    display: flex;\n    align-items: center;\n    gap: 20px;\n    flex-wrap: wrap;\n  }\n  .lq-icon {\n    flex: none;\n    filter: drop-shadow(0 3px 4px rgb(0 0 0 \u002F 0.45));\n  }\n  .lq-brand { flex: 1 1 260px; }\n  .lq-title {\n    margin: 0;\n    font: bold clamp(2rem, 5cqw, 3.2rem)\u002F1 Didot, 'Bodoni 72', Baskerville, Georgia, serif;\n    color: #5b4a36;\n    text-shadow: 0 1px 0 rgb(255 255 255 \u002F 0.85), 0 -1px 0 rgb(0 0 0 \u002F 0.35);\n    letter-spacing: -0.01em;\n  }\n  .lq-title span {\n    font-family: 'Bradley Hand', 'Segoe Script', 'Comic Neue', cursive;\n    color: #8a3b1c;\n  }\n  .lq-tag {\n    margin: 6px 0 0;\n    color: #6a5a44;\n    font-style: italic;\n    text-shadow: 0 1px 0 rgb(255 255 255 \u002F 0.7);\n  }\n  .lq-buy {\n    display: grid;\n    padding: 9px 22px 11px;\n    border-radius: 12px;\n    color: #fff;\n    text-decoration: none;\n    text-align: center;\n    text-shadow: 0 -1px 0 rgb(0 0 0 \u002F 0.5);\n    background: linear-gradient(#7cc054, #4e9a2a 50%, #3f8a1d 51%, #4f9e2c);\n    border: 1px solid #2f6612;\n    box-shadow: inset 0 1px 0 rgb(255 255 255 \u002F 0.5), 0 2px 3px rgb(0 0 0 \u002F 0.35);\n  }\n  .lq-buy:hover { background: linear-gradient(#8ed063, #59aa33 50%, #479823 51%, #5aab35); }\n  .lq-buy:active { box-shadow: inset 0 2px 5px rgb(0 0 0 \u002F 0.45); }\n  .lq-buy__small { font-size: 0.75rem; opacity: 0.9; }\n  .lq-buy__big { font: bold 1.1rem 'Helvetica Neue', Helvetica, Arial, sans-serif; }\n\n  \u002F* Era stamp: a brass nameplate and a letterpressed line under the tagline *\u002F\n  .era-stamp {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: 4px 10px;\n    margin: 10px 0 0;\n    font: 0.9rem Baskerville, Georgia, serif;\n    color: #4f3f2c;\n    text-shadow: 0 1px 0 rgb(255 255 255 \u002F 0.75);\n  }\n  .era-stamp__no {\n    padding: 2px 10px 3px;\n    font: bold 0.7rem 'Helvetica Neue', Helvetica, Arial, sans-serif;\n    text-transform: uppercase;\n    letter-spacing: 0.1em;\n    color: #3b2a08;\n    text-shadow: 0 1px 0 rgb(255 240 190 \u002F 0.8);\n    border-radius: 4px;\n    background: linear-gradient(135deg, #f7e2a0, #c49a3c 40%, #f3d687 60%, #a67c26);\n    box-shadow: inset 0 1px 0 rgb(255 255 255 \u002F 0.7), inset 0 -1px 0 rgb(0 0 0 \u002F 0.3), 0 1px 2px rgb(0 0 0 \u002F 0.45);\n  }\n  .era-stamp__years { font-weight: bold; }\n  .era-stamp__title { font-style: italic; }\n\n  \u002F* Travel CTA: a stitched leather tab on the journal page, next to the page curl *\u002F\n  .era-cta {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: 12px 18px;\n    margin: 22px 0 0 20px;\n    a { text-decoration: none; }\n  }\n  .era-cta__next {\n    display: grid;\n    padding: 5px;\n    border-radius: 9px;\n    color: #f5e2c2;\n    text-shadow: 0 -1px 0 rgb(0 0 0 \u002F 0.7);\n    background:\n      var(--lq-noise),\n      radial-gradient(ellipse at 50% 0, rgb(255 255 255 \u002F 0.2), transparent 70%),\n      linear-gradient(#7a4220, #4a2310);\n    box-shadow: 0 4px 8px rgb(0 0 0 \u002F 0.45), inset 0 1px 0 rgb(255 255 255 \u002F 0.25);\n    .era-cta__label,\n    .era-cta__to {\n      padding: 0 16px;\n      border: 2px dashed rgb(242 214 170 \u002F 0.75);\n    }\n    .era-cta__label {\n      padding-top: 6px;\n      border-bottom: 0;\n      border-radius: 6px 6px 0 0;\n      font: bold 1.1rem 'Helvetica Neue', Helvetica, Arial, sans-serif;\n    }\n    .era-cta__label::after { content: ' \\203A'; }\n    .era-cta__to {\n      padding-bottom: 6px;\n      border-top: 0;\n      border-radius: 0 0 6px 6px;\n      font: italic 0.8rem Georgia, serif;\n      color: #f0dcc0;\n    }\n  }\n  .era-cta__next:hover {\n    background:\n      var(--lq-noise),\n      radial-gradient(ellipse at 50% 0, rgb(255 255 255 \u002F 0.3), transparent 70%),\n      linear-gradient(#8a4d27, #552a14);\n  }\n  .era-cta__next:active {\n    transform: translateY(1px);\n    box-shadow: 0 1px 3px rgb(0 0 0 \u002F 0.5), inset 0 2px 5px rgb(0 0 0 \u002F 0.5);\n  }\n  .era-cta__prev {\n    font: 1.05rem\u002F1.3 'Bradley Hand', 'Segoe Script', 'Comic Neue', 'Comic Sans MS', cursive;\n    color: #22325e;\n    .era-cta__label { text-decoration: underline; text-decoration-color: rgb(34 50 94 \u002F 0.5); }\n    .era-cta__label::before { content: '\\2039  '; }\n    .era-cta__to { display: block; font-size: 0.85rem; color: #6a3a1c; }\n  }\n  .era-cta__prev:hover .era-cta__label { color: #8a3b1c; }\n  .era-cta .era-cta__next:focus-visible,\n  .era-cta .era-cta__prev:focus-visible {\n    outline: 3px solid #2b6cb0;\n    outline-offset: 3px;\n  }\n\n  .lq-nav {\n    background:\n      var(--lq-noise),\n      radial-gradient(ellipse at 50% 0, rgb(255 255 255 \u002F 0.18), transparent 70%),\n      linear-gradient(#6d3a1d, #4a2310);\n    padding: 7px;\n    box-shadow: 0 4px 10px rgb(0 0 0 \u002F 0.5), inset 0 1px 0 rgb(255 255 255 \u002F 0.2);\n  }\n  .lq-nav ul {\n    display: flex;\n    flex-wrap: wrap;\n    margin: 0;\n    padding: 6px 10px;\n    list-style: none;\n    border: 2px dashed rgb(242 214 170 \u002F 0.7);\n    border-radius: 6px;\n    box-shadow: 0 1px 0 rgb(0 0 0 \u002F 0.4), inset 0 1px 0 rgb(0 0 0 \u002F 0.4);\n  }\n  .lq-nav a {\n    display: block;\n    padding: 8px 16px;\n    color: #f5e2c2;\n    text-decoration: none;\n    font: bold 0.95rem 'Helvetica Neue', Helvetica, Arial, sans-serif;\n    text-shadow: 0 -1px 0 rgb(0 0 0 \u002F 0.7);\n    border-radius: 5px;\n  }\n  .lq-nav a[aria-current],\n  .lq-nav a:hover {\n    background: linear-gradient(rgb(0 0 0 \u002F 0.35), rgb(0 0 0 \u002F 0.15));\n    box-shadow: inset 0 2px 4px rgb(0 0 0 \u002F 0.55), 0 1px 0 rgb(255 255 255 \u002F 0.15);\n  }\n\n  \u002F* Desk scene: the lamp lights it *\u002F\n  .lq-desk {\n    position: relative;\n    display: grid;\n    grid-template-columns: 1fr 190px;\n    gap: 24px;\n    align-items: start;\n    margin: 30px 0;\n  }\n  .lq-desk::after {\n    content: '';\n    position: absolute;\n    inset: -30px -16px;\n    pointer-events: none;\n    background: radial-gradient(ellipse at 88% 10%, transparent 10%, rgb(10 5 0 \u002F 0.75) 75%);\n    opacity: calc(1 - var(--lq-lamp));\n    transition: opacity 300ms ease;\n    z-index: 2;\n  }\n  &:has(#lq-lamp:not(:checked)) { --lq-lamp: 0.12; }\n\n  .lq-book {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    padding: 14px;\n    border-radius: 14px;\n    background:\n      var(--lq-noise),\n      linear-gradient(90deg, #4a2310, #7a4220 48%, #2a1206 50%, #7a4220 52%, #4a2310);\n    box-shadow: 0 12px 26px rgb(0 0 0 \u002F 0.55), inset 0 0 0 1px rgb(255 255 255 \u002F 0.12);\n    outline: 2px dashed rgb(242 214 170 \u002F 0.55);\n    outline-offset: -8px;\n  }\n  .lq-page {\n    position: relative;\n    min-height: 330px;\n    padding: 22px 22px 26px 26px;\n    background:\n      linear-gradient(90deg, transparent 34px, rgb(214 80 80 \u002F 0.5) 34px 35px, transparent 35px),\n      repeating-linear-gradient(transparent 0 27px, rgb(110 150 190 \u002F 0.4) 27px 28px),\n      linear-gradient(#fdfaf0, #f3ecd8);\n    background-position: 0 0, 0 14px, 0 0;\n  }\n  .lq-page--left {\n    border-radius: 4px 0 0 4px;\n    box-shadow: inset -24px 0 26px -18px rgb(0 0 0 \u002F 0.45);\n  }\n  .lq-page--right {\n    padding-bottom: 64px;\n    border-radius: 0 4px 4px 0;\n    box-shadow: inset 24px 0 26px -18px rgb(0 0 0 \u002F 0.45);\n  }\n  .lq-page--right::after {\n    content: '';\n    position: absolute;\n    right: 0;\n    bottom: 0;\n    width: 54px;\n    height: 54px;\n    background: linear-gradient(315deg, #4a2310 0 50%, #e0d6bd 50%, #fffaf0 70%, #c9bea2);\n    box-shadow: -3px -3px 6px rgb(0 0 0 \u002F 0.25);\n    border-top-left-radius: 8px;\n    transition: width 250ms ease, height 250ms ease;\n  }\n  .lq-page--right:hover::after { width: 76px; height: 76px; }\n\n  .lq-date,\n  .lq-label,\n  .lq-script-h,\n  .lq-sticky,\n  .lq-note textarea {\n    font-family: 'Bradley Hand', 'Segoe Script', 'Comic Neue', 'Comic Sans MS', cursive;\n  }\n  .lq-date {\n    margin: 0 0 8px 20px;\n    color: #8a3b1c;\n    font-size: 1.1rem;\n    line-height: 28px;\n  }\n  .lq-label {\n    display: block;\n    margin-left: 20px;\n    font-size: 1.2rem;\n    line-height: 28px;\n    color: #2b3d6b;\n  }\n  .lq-note textarea {\n    display: block;\n    width: calc(100% - 20px);\n    margin-left: 20px;\n    box-sizing: border-box;\n    resize: none;\n    border: 0;\n    padding: 0;\n    background: transparent;\n    color: #22325e;\n    font-size: 1.2rem;\n    line-height: 28px;\n  }\n  .lq-note textarea:focus { outline: 2px dotted #8a3b1c; outline-offset: 2px; }\n  .lq-note__actions {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 10px;\n    margin: 14px 0 0 20px;\n  }\n  .lq-key {\n    padding: 8px 14px;\n    font: bold 0.85rem 'Helvetica Neue', Helvetica, Arial, sans-serif;\n    color: #4a463c;\n    text-shadow: 0 1px 0 #fff;\n    background: linear-gradient(#fdfdfb, #d6d1c3);\n    border: 1px solid #8a8578;\n    border-radius: 7px;\n    box-shadow: 0 3px 0 #8a8578, 0 4px 5px rgb(0 0 0 \u002F 0.3), inset 0 1px 0 #fff;\n    cursor: pointer;\n  }\n  .lq-key:active { transform: translateY(3px); box-shadow: 0 0 0 #8a8578, inset 0 1px 3px rgb(0 0 0 \u002F 0.3); }\n  .lq-key--brass {\n    color: #3b2a08;\n    text-shadow: 0 1px 0 rgb(255 240 190 \u002F 0.8);\n    background: linear-gradient(#fbe9a6, #d9ae4a 50%, #c3952f 51%, #e1bb5b);\n    border-color: #7a5a1c;\n    box-shadow: 0 3px 0 #7a5a1c, 0 4px 5px rgb(0 0 0 \u002F 0.3), inset 0 1px 0 rgb(255 255 255 \u002F 0.7);\n  }\n  .lq-key:focus-visible,\n  .lq-buy:focus-visible,\n  .lq-nav a:focus-visible,\n  .lq a:focus-visible {\n    outline: 3px solid #f4c430;\n    outline-offset: 2px;\n  }\n\n  .lq-script-h {\n    margin: 0 0 10px 20px;\n    font-size: 1.3rem;\n    line-height: 28px;\n    color: #8a3b1c;\n    font-weight: normal;\n  }\n  .lq-stickies {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 14px;\n    margin: 0;\n    padding: 4px 0 0 18px;\n    list-style: none;\n  }\n  .lq-sticky {\n    position: relative;\n    width: 128px;\n    min-height: 104px;\n    padding: 18px 12px 12px;\n    box-sizing: border-box;\n    font-size: 1rem;\n    line-height: 1.3;\n    color: #3a3a2a;\n    background: linear-gradient(#fff7a8, #f7e66c);\n    box-shadow: 0 8px 10px -6px rgb(0 0 0 \u002F 0.5), inset 0 -10px 18px -12px rgb(120 90 0 \u002F 0.5);\n    transform: rotate(-2deg);\n    overflow-wrap: anywhere;\n  }\n  .lq-sticky::before {\n    content: '';\n    position: absolute;\n    top: 5px;\n    left: 50%;\n    width: 13px;\n    height: 13px;\n    margin-left: -6px;\n    border-radius: 50%;\n    background: radial-gradient(circle at 35% 30%, #ff9a9a, #c41d1d 55%, #6d0a0a);\n    box-shadow: 1px 3px 3px rgb(0 0 0 \u002F 0.45);\n  }\n  .lq-sticky:nth-child(even) { transform: rotate(2.5deg); }\n  .lq-sticky--blue { background: linear-gradient(#d6f0ff, #a9d8f5); }\n  .lq-sticky--pink { background: linear-gradient(#ffe0ec, #f7b6cf); }\n  .lq-sticky.is-new { animation: e10-pin 420ms cubic-bezier(.2, 1.4, .5, 1); }\n  .lq-hint {\n    margin: 16px 0 0 20px;\n    font-size: 0.85rem;\n    line-height: 1.4;\n    color: #6a5a44;\n    font-style: italic;\n  }\n\n  \u002F* Lamp and brass plate *\u002F\n  .lq-lamp {\n    position: relative;\n    z-index: 3;\n    display: grid;\n    justify-items: center;\n    gap: 10px;\n  }\n  .lq-bulb {\n    opacity: var(--lq-lamp);\n    filter: drop-shadow(0 0 10px #fff2a0);\n    transition: opacity 300ms ease;\n  }\n  .lq-plate {\n    display: flex;\n    gap: 18px;\n    align-items: center;\n    padding: 14px 16px;\n    border-radius: 10px;\n    background: linear-gradient(135deg, #f7e2a0, #c49a3c 40%, #f3d687 60%, #a67c26);\n    box-shadow: inset 0 1px 0 rgb(255 255 255 \u002F 0.7), inset 0 -1px 0 rgb(0 0 0 \u002F 0.3), 0 4px 8px rgb(0 0 0 \u002F 0.5);\n  }\n  .lq-switch {\n    display: grid;\n    justify-items: center;\n    gap: 6px;\n    cursor: pointer;\n    position: relative;\n  }\n  .lq-switch input {\n    position: absolute;\n    opacity: 0;\n    width: 100%;\n    height: 100%;\n    margin: 0;\n    cursor: pointer;\n  }\n  .lq-switch__track {\n    position: relative;\n    width: 30px;\n    height: 54px;\n    border-radius: 15px;\n    background: linear-gradient(90deg, #3a2a10, #5a4420 50%, #3a2a10);\n    box-shadow: inset 0 3px 6px rgb(0 0 0 \u002F 0.8), 0 1px 0 rgb(255 255 255 \u002F 0.6);\n  }\n  .lq-switch__lever {\n    position: absolute;\n    left: 3px;\n    top: 28px;\n    width: 24px;\n    height: 24px;\n    border-radius: 50%;\n    background: radial-gradient(circle at 35% 30%, #fff9da, #e9c25a 45%, #8a6420);\n    box-shadow: 0 3px 4px rgb(0 0 0 \u002F 0.6);\n    transition: top 160ms ease;\n  }\n  .lq-switch input:checked + .lq-switch__track .lq-switch__lever { top: 2px; }\n  .lq-switch input:focus-visible + .lq-switch__track { outline: 3px solid #fff; outline-offset: 3px; }\n  .lq-switch__label {\n    font: bold 0.7rem 'Helvetica Neue', Helvetica, Arial, sans-serif;\n    text-transform: uppercase;\n    letter-spacing: 0.08em;\n    color: #4a3410;\n    text-shadow: 0 1px 0 rgb(255 255 255 \u002F 0.6);\n  }\n  .lq-knob-wrap { display: grid; justify-items: center; gap: 6px; }\n  .lq-knob {\n    --turn: 135deg;\n    position: relative;\n    width: 54px;\n    height: 54px;\n    border-radius: 50%;\n    background:\n      repeating-conic-gradient(from 0deg, rgb(255 255 255 \u002F 0.18) 0 4deg, rgb(0 0 0 \u002F 0.12) 4deg 8deg),\n      radial-gradient(circle at 40% 30%, #f2f2ee, #9a9890 60%, #55534c);\n    box-shadow: 0 4px 7px rgb(0 0 0 \u002F 0.6), inset 0 1px 1px #fff;\n    transform: rotate(var(--turn));\n    cursor: grab;\n    touch-action: none;\n  }\n  .lq-knob:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }\n  .lq-knob__mark {\n    position: absolute;\n    left: 50%;\n    top: 5px;\n    width: 4px;\n    height: 14px;\n    margin-left: -2px;\n    border-radius: 2px;\n    background: #8a1c1c;\n  }\n\n  \u002F* Paper cards with deckled edges *\u002F\n  .lq-section-h {\n    margin: 0 0 18px;\n    text-align: center;\n    font: bold 1.8rem Didot, 'Bodoni 72', Baskerville, Georgia, serif;\n    color: #2a1608;\n    text-shadow: 0 1px 0 rgb(255 220 180 \u002F 0.35);\n  }\n  .lq-features,\n  .lq-praise {\n    padding: 28px 22px 32px;\n    margin: 0 0 28px;\n    border-radius: 8px;\n    background:\n      var(--lq-noise),\n      repeating-linear-gradient(45deg, rgb(255 255 255 \u002F 0.05) 0 2px, transparent 2px 4px),\n      linear-gradient(#cfc6ae, #b8ad91);\n    box-shadow: inset 0 2px 10px rgb(0 0 0 \u002F 0.35), 0 1px 0 rgb(255 255 255 \u002F 0.25);\n  }\n  .lq-cards {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));\n    gap: 26px;\n  }\n  .lq-card {\n    padding: 26px 22px 30px;\n    text-align: center;\n    background: var(--lq-noise), linear-gradient(#fffdf6, #f1e8d2);\n    filter: drop-shadow(0 4px 4px rgb(0 0 0 \u002F 0.35));\n    mask: linear-gradient(#000, #000) 0 0 \u002F 100% calc(100% - 6px) no-repeat,\n      radial-gradient(circle at 6px 100%, transparent 5px, #000 5.5px) 0 100% \u002F 12px 7px repeat-x;\n  }\n  .lq-card h3 {\n    margin: 10px 0 6px;\n    font: bold 1.15rem Baskerville, Georgia, serif;\n    color: #4a2310;\n  }\n  .lq-card p { margin: 0; line-height: 1.5; }\n\n  .lq-praise {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 22px;\n    align-items: center;\n    justify-content: center;\n  }\n  .lq-praise .lq-section-h { flex-basis: 100%; }\n  .lq-quote {\n    margin: 0;\n    max-width: 300px;\n    padding: 20px 22px;\n    background: linear-gradient(#fffef8, #f6eedb);\n    box-shadow: 0 6px 12px rgb(0 0 0 \u002F 0.3);\n    transform: rotate(-1.5deg);\n  }\n  .lq-quote--tilt { transform: rotate(2deg); }\n  .lq-quote blockquote { margin: 0; }\n  .lq-quote p {\n    margin: 0;\n    font: 1.3rem\u002F1.3 'Bradley Hand', 'Segoe Script', 'Comic Neue', cursive;\n    color: #22325e;\n  }\n  .lq-quote figcaption { margin-top: 8px; font-size: 0.85rem; color: #6a5a44; }\n  .lq-badge {\n    display: grid;\n    place-items: center;\n    align-content: center;\n    width: 112px;\n    height: 112px;\n    border-radius: 50%;\n    text-align: center;\n    color: #fff;\n    font: bold 0.9rem\u002F1.1 'Helvetica Neue', Helvetica, Arial, sans-serif;\n    text-transform: uppercase;\n    text-shadow: 0 -1px 0 rgb(0 0 0 \u002F 0.5);\n    background: radial-gradient(circle at 40% 30%, #e05050, #a01818 70%);\n    box-shadow: 0 0 0 4px #a01818, 0 0 0 6px #f4d77a, 0 6px 12px rgb(0 0 0 \u002F 0.45);\n    outline: 2px dashed rgb(255 255 255 \u002F 0.5);\n    outline-offset: -10px;\n    transform: rotate(8deg);\n  }\n  .lq-badge small { font-size: 0.75rem; }\n\n  .lq-foot {\n    padding: 20px;\n    text-align: center;\n    color: #f0dcc0;\n    font-size: 0.9rem;\n    text-shadow: 0 -1px 0 rgb(0 0 0 \u002F 0.6);\n  }\n  .lq-foot a { color: #ffe6a8; }\n  .lq-foot__brand {\n    margin: 0 0 6px;\n    font: 1.6rem 'Bradley Hand', 'Segoe Script', 'Comic Neue', cursive;\n    color: #fbe6c4;\n    text-shadow: 0 -1px 0 rgb(0 0 0 \u002F 0.7), 0 1px 0 rgb(255 220 180 \u002F 0.2);\n  }\n  .lq-foot__fine { font-size: 0.75rem; opacity: 0.85; }\n\n  @container screen (max-width: 760px) {\n    .lq-desk { grid-template-columns: 1fr; }\n    .lq-book { grid-template-columns: 1fr; }\n    .lq-page--left { border-radius: 4px 4px 0 0; box-shadow: inset 0 -18px 20px -16px rgb(0 0 0 \u002F 0.4); }\n    .lq-page--right { border-radius: 0 0 4px 4px; box-shadow: none; }\n    .lq-lamp { grid-template-columns: auto auto; align-items: end; justify-content: center; }\n    .lq-lamp__art { width: 110px; height: 138px; }\n    .lq-top { padding: 18px 16px; }\n    .lq-icon { width: 72px; height: 72px; }\n  }\n}\n\n@keyframes e10-pin {\n  from { transform: translateY(-30px) rotate(-12deg) scale(1.1); opacity: 0; }\n}\n\n}",[85,87,89,91],{"caption":49,"file":47,"html":86},"\u003Cpre class=\"shiki github-dark-dimmed\" style=\"background-color:#22272e;color:#adbac7\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">.lq-nav\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>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">    var\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#F69D50\">--lq-noise\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">),\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">    radial-gradient\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">ellipse\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"> at\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 50\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">%\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 0\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">rgb\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">255\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 255\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 255\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> \u002F \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">0.18\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">), \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">transparent\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 70\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">%\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">),\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">    linear-gradient\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">#6d3a1d\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">#4a2310\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\">7\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\">  box-shadow\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\"> 10\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.5\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\"> 1\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">px\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 0\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> rgb\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">255\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 255\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 255\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> \u002F \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">0.2\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\">.lq-nav\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\"> ul\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\">flex\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  flex-wrap\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">wrap\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  margin\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\">  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\"> 10\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\">  list-style\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\">  border\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:#6CB6FF\"> dashed\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> rgb\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">242\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 214\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 170\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> \u002F \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">0.7\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\">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\">  box-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\"> 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.4\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\"> 1\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">px\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 0\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.4\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":52,"file":47,"html":88},"\u003Cpre class=\"shiki github-dark-dimmed\" style=\"background-color:#22272e;color:#adbac7\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">.lq-title\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  margin\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\">  font\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">bold\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> clamp\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">2\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">rem\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">5\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">vw\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">3.2\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">rem\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">)\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">1\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> Didot, \u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">'Bodoni 72'\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, Baskerville, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">Georgia\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">serif\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\">#5b4a36\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\"> rgb\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">255\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 255\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 255\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> \u002F \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">0.85\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\"> 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.35\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  letter-spacing\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">-0.01\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">em\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":56,"file":54,"html":90},"\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\">svg\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"lq-icon\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> data-trait\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"gloss\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> viewBox\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"0 0 120 120\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> width\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"96\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> height\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"96\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> role\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"img\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> aria-label\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"Ledger \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">&\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\"> Quill app icon: a stitched leather journal with a quill\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">defs\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">    <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">linearGradient\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> id\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"lq-leather\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> x1\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"0\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> y1\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"0\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> x2\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"0\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> y2\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"1\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">      <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">stop\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> offset\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"0\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> stop-color\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"#9a5a34\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">\u002F><\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">stop\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> offset\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"1\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> stop-color\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"#4a2412\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">\u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">    <\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">linearGradient\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">    <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">linearGradient\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> id\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"lq-gloss\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> x1\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"0\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> y1\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"0\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> x2\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"0\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> y2\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"1\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">      <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">stop\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> offset\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"0\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> stop-color\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"#fff\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> stop-opacity\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\".55\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">\u002F><\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">stop\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> offset\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"1\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> stop-color\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"#fff\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> stop-opacity\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\".05\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">\u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">    <\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">linearGradient\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">    <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">linearGradient\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> id\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"lq-feather\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> x1\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"0\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> y1\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"0\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> x2\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"1\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> y2\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"1\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">      <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">stop\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> offset\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"0\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> stop-color\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"#fffdf5\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">\u002F><\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">stop\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> offset\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"1\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> stop-color\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"#c9bfa6\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">\u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">    <\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">linearGradient\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\">defs\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">rect\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> x\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"4\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> y\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"4\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> width\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"112\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> height\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"112\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> rx\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"26\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> fill\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"url(#lq-leather)\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">\u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">rect\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> x\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"12\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> y\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"12\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> width\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"96\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> height\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"96\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> rx\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"19\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> fill\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"none\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> stroke\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"#f3d9b5\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> stroke-opacity\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\".75\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> stroke-width\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"2\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> stroke-dasharray\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"5 4\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">\u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\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\">\"M84 22c-18 6-34 26-44 58l4 2c8-14 16-24 26-30-6 0-10 0-14-1 10-4 18-10 24-18-6 1-10 1-14 0 8-3 14-6 18-11z\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> fill\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"url(#lq-feather)\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> stroke\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"#6b5a3e\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> stroke-width\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"1\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">\u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\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\">\"M40 80l-6 14 9-11\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> fill\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"#1e140c\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">\u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\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\">\"M4 30C4 16 16 4 30 4h60c14 0 26 12 26 26v22C82 62 40 62 4 52z\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> fill\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"url(#lq-gloss)\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">\u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\"><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">svg\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"caption":61,"file":59,"html":92},"\u003Cpre class=\"shiki github-dark-dimmed\" style=\"background-color:#22272e;color:#adbac7\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#F47067\">let\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> level \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">=\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 100\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F47067\">function\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\"> setLevel\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#F69D50\">v\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\">  level \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">=\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\">20\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\">100\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, Math.\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">round\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(v)))\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#768390\">  \u002F\u002F 20% to 100% maps to a 270 degree sweep, like a real dimmer.\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  knob.style.\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">setProperty\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">'--turn'\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">`${\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">-\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">135\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"> +\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\"> ((\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">level\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"> -\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 20\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">) \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 80\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">) \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">*\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 270\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">}deg`\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  knob.\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\">(level))\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  knob.\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\">level\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">} percent`\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  root.style.\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">setProperty\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">'--lq-dim'\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">String\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(level \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 100\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\">lamp.checked \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">&&\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> level \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">>\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 20\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">) lamp.checked \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">=\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> true\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">}\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",1791232160974]