[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"example-src-skeuomorphic-album":3},"\u003Cgui version=\"0.2\" name=\"Album Details\">\n  \u003Cmode name=\"theme\" values=\"light dark\" default=\"light\" \u002F>\n\n  \u003Ctokens>\n    \u003C!-- Mode-varying warm surfaces (the \"room\" the device sits in) -->\n    \u003Ccolor name=\"bg\"     theme-light=\"#ECE3D1\" theme-dark=\"#15110D\" \u002F>\n    \u003Ccolor name=\"panel\"  theme-light=\"#F6F0E2\" theme-dark=\"#221D17\" \u002F>\n    \u003Ccolor name=\"ink\"    theme-light=\"#2A2018\" theme-dark=\"#F2EADA\" \u002F>\n    \u003Ccolor name=\"ink-2\"  theme-light=\"#8C7C62\" theme-dark=\"#A2937A\" \u002F>\n    \u003Ccolor name=\"hair\"   theme-light=\"#DCD0B9\" theme-dark=\"#332C24\" \u002F>\n\n    \u003C!-- Constant device hardware (reads the same in any light) -->\n    \u003Ccolor name=\"cream\"   value=\"#ECE4D2\" \u002F>\n    \u003Ccolor name=\"cream-2\" value=\"#B4A88F\" \u002F>\n    \u003Ccolor name=\"groove\"  value=\"#12100C\" \u002F>\n    \u003Ccolor name=\"ring\"    value=\"#000000\" \u002F>\n\n    \u003Cnumber name=\"r-art\"   value=\"18\" \u002F>\n    \u003Cnumber name=\"r-panel\" value=\"22\" \u002F>\n    \u003Cnumber name=\"r-deck\"  value=\"26\" \u002F>\n    \u003Cnumber name=\"r-pill\"  value=\"999\" \u002F>\n  \u003C\u002Ftokens>\n\n  \u003Cstyles>\n    \u003Ctext-style name=\"Serif\u002FTitle\" font-family=\"Playfair Display\" font-size=\"27\" font-weight=\"700\" line-height=\"32\" \u002F>\n    \u003Ctext-style name=\"Serif\u002FHead\"  font-family=\"Playfair Display\" font-size=\"19\" font-weight=\"600\" line-height=\"24\" \u002F>\n    \u003Ctext-style name=\"Eyebrow\"     font-family=\"SF Pro\" font-size=\"11\" font-weight=\"600\" line-height=\"14\" letter-spacing=\"1.4\" \u002F>\n    \u003Ctext-style name=\"Body\"        font-family=\"SF Pro\" font-size=\"15\" font-weight=\"400\" line-height=\"20\" \u002F>\n    \u003Ctext-style name=\"Label\"       font-family=\"SF Pro\" font-size=\"13\" font-weight=\"600\" line-height=\"16\" \u002F>\n    \u003Ctext-style name=\"Time\"        font-family=\"SF Pro\" font-size=\"12\" font-weight=\"600\" line-height=\"14\" letter-spacing=\"0.3\" \u002F>\n    \u003Ctext-style name=\"Caption\"     font-family=\"SF Pro\" font-size=\"11\" font-weight=\"500\" line-height=\"14\" \u002F>\n  \u003C\u002Fstyles>\n\n  \u003Cfonts>\n    \u003Cfont family=\"SF Pro\" source=\"system\" weights=\"400 500 600 700\" styles=\"normal\" \u002F>\n    \u003Cfont family=\"Inter\" source=\"google\" weights=\"400 500 600 700\" styles=\"normal\" \u002F>\n    \u003Cfont family=\"Playfair Display\" source=\"google\" weights=\"600 700\" styles=\"normal\" \u002F>\n  \u003C\u002Ffonts>\n\n  \u003Ccomponents \u002F>\n\n  \u003Ccol w=\"390\" fill=\"$bg\" pb=\"34\" gap=\"22\">\n\n    \u003C!-- Status bar -->\n    \u003Crow w=\"fill\" p=\"16 22 0\" align=\"middle-center\" gap=\"auto\">\n      \u003Ctext value=\"9:41\" font-family=\"SF Pro\" font-size=\"15\" font-weight=\"600\" color=\"$ink\" \u002F>\n      \u003Crow gap=\"6\" align=\"middle-center\">\n        \u003Ctext text-style=\"Caption\" value=\"100%\" color=\"$ink-2\" \u002F>\n        \u003Crow gap=\"2\" align=\"middle-center\">\n          \u003Crow w=\"22\" h=\"11\" radius=\"3\" border=\"1 $ink-2\" p=\"2\" align=\"middle-left\">\n            \u003Crect w=\"15\" h=\"6\" radius=\"1\" fill=\"$ink\" \u002F>\n          \u003C\u002Frow>\n          \u003Crect w=\"2\" h=\"4\" radius=\"1\" fill=\"$ink-2\" \u002F>\n        \u003C\u002Frow>\n      \u003C\u002Frow>\n    \u003C\u002Frow>\n\n    \u003C!-- Header: round metal buttons flanking a serif title -->\n    \u003Crow role=\"top-navigation-bar\" w=\"fill\" p=\"2 16 0\" align=\"middle-center\" gap=\"auto\">\n      \u003Ccol role=\"button\" w=\"40\" h=\"40\" radius=\"$r-pill\" align=\"middle-center\" fill=\"linear-gradient(180deg, #524A40 0%, #322C25 100%)\">\n        \u003Cappearance>\n          \u003Cfill type=\"linear-gradient\" value=\"linear-gradient(180deg, #524A40 0%, #322C25 100%)\" \u002F>\n          \u003Ceffect type=\"drop-shadow\" x=\"0\" y=\"4\" radius=\"10\" spread=\"0\" color=\"#00000055\" \u002F>\n          \u003Ceffect type=\"inner-shadow\" x=\"0\" y=\"1\" radius=\"0\" spread=\"0\" color=\"#FFFFFF26\" \u002F>\n        \u003C\u002Fappearance>\n        \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Fmdi\u002Farrow-left.svg?color=%23ECE4D2\" w=\"22\" h=\"22\" \u002F>\n      \u003C\u002Fcol>\n      \u003Ccol gap=\"2\" align=\"middle-center\">\n        \u003Ctext text-style=\"Eyebrow\" text-case=\"uppercase\" value=\"Now Playing From\" color=\"$ink-2\" align=\"center\" \u002F>\n        \u003Ctext value=\"Margin Notes\" font-family=\"SF Pro\" font-size=\"14\" font-weight=\"600\" color=\"$ink\" align=\"center\" \u002F>\n      \u003C\u002Fcol>\n      \u003Ccol role=\"button\" w=\"40\" h=\"40\" radius=\"$r-pill\" align=\"middle-center\" fill=\"linear-gradient(180deg, #524A40 0%, #322C25 100%)\">\n        \u003Cappearance>\n          \u003Cfill type=\"linear-gradient\" value=\"linear-gradient(180deg, #524A40 0%, #322C25 100%)\" \u002F>\n          \u003Ceffect type=\"drop-shadow\" x=\"0\" y=\"4\" radius=\"10\" spread=\"0\" color=\"#00000055\" \u002F>\n          \u003Ceffect type=\"inner-shadow\" x=\"0\" y=\"1\" radius=\"0\" spread=\"0\" color=\"#FFFFFF26\" \u002F>\n        \u003C\u002Fappearance>\n        \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Fmdi\u002Fdots-horizontal.svg?color=%23ECE4D2\" w=\"22\" h=\"22\" \u002F>\n      \u003C\u002Fcol>\n    \u003C\u002Frow>\n\n    \u003C!-- Vinyl Record sliding out of sleeve visual -->\n    \u003Ccol w=\"fill\" p=\"6 16 0\" align=\"middle-center\">\n      \u003Cframe w=\"358\" h=\"210\">\n        \u003C!-- Vinyl Record partially sliding out to the right -->\n        \u003Cellipse x=\"138\" y=\"5\" w=\"200\" h=\"200\" fill=\"radial-gradient(circle at 50% 36%, #2C2823 0%, #100E0B 58%, #050403 100%)\" border=\"1 #FFFFFF10\">\n          \u003Cappearance>\n            \u003Cfill type=\"radial-gradient\" value=\"radial-gradient(circle at 50% 36%, #2C2823 0%, #100E0B 58%, #050403 100%)\" \u002F>\n            \u003Ceffect type=\"drop-shadow\" x=\"8\" y=\"16\" radius=\"28\" spread=\"-8\" color=\"#0000008F\" \u002F>\n          \u003C\u002Fappearance>\n        \u003C\u002Fellipse>\n        \u003C!-- Center label of vinyl record -->\n        \u003Cellipse x=\"198\" y=\"65\" w=\"80\" h=\"80\" fill=\"linear-gradient(180deg, #D24A2C 0%, #A82E16 100%)\">\n          \u003Cappearance>\n            \u003Cfill type=\"linear-gradient\" value=\"linear-gradient(180deg, #D24A2C 0%, #A82E16 100%)\" \u002F>\n            \u003Ceffect type=\"inner-shadow\" x=\"0\" y=\"1\" radius=\"0\" spread=\"0\" color=\"#FFFFFF4D\" \u002F>\n          \u003C\u002Fappearance>\n        \u003C\u002Fellipse>\n        \u003C!-- Spindle hole -->\n        \u003Cellipse x=\"233\" y=\"100\" w=\"10\" h=\"10\" fill=\"#15110D\">\n          \u003Cappearance>\n            \u003Cfill type=\"color\" value=\"#15110D\" \u002F>\n            \u003Ceffect type=\"inner-shadow\" x=\"0\" y=\"1\" radius=\"1\" spread=\"0\" color=\"#000000A6\" \u002F>\n          \u003C\u002Fappearance>\n        \u003C\u002Fellipse>\n\n        \u003C!-- Album Cover Sleeve resting on top -->\n        \u003Cframe x=\"20\" y=\"5\" w=\"200\" h=\"200\" radius=\"10\" clip=\"true\">\n          \u003Cappearance>\n            \u003Cfill type=\"image\" src=\"https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1544947950-fa07a98d237f?w=400&q=80\" fit=\"cover\" \u002F>\n            \u003Ceffect type=\"drop-shadow\" x=\"0\" y=\"10\" radius=\"24\" spread=\"-6\" color=\"#00000099\" \u002F>\n          \u003C\u002Fappearance>\n          \u003C!-- Spine shadow -->\n          \u003Crect w=\"8\" h=\"200\" fill=\"linear-gradient(90deg, #0000007A 0%, #00000000 100%)\" abs=\"true\" x=\"0\" y=\"0\" \u002F>\n          \u003Crect w=\"200\" h=\"200\" fill=\"linear-gradient(135deg, #FFFFFF14 0%, #FFFFFF00 40%)\" abs=\"true\" x=\"0\" y=\"0\" \u002F>\n        \u003C\u002Fframe>\n      \u003C\u002Fframe>\n    \u003C\u002Fcol>\n\n    \u003C!-- Ruled Notepad Clipboard Tracklist -->\n    \u003Ccol w=\"fill\" p=\"10 16 0\" gap=\"0\">\n      \u003C!-- Legal pad paper sheet background -->\n      \u003Ccol w=\"fill\" fill=\"$panel\" radius=\"12\" p=\"28 20 24\" border=\"1 $hair\">\n        \u003Cappearance>\n          \u003Ceffect type=\"drop-shadow\" x=\"0\" y=\"12\" radius=\"28\" spread=\"-6\" color=\"#0000003A\" \u002F>\n          \u003Ceffect type=\"inner-shadow\" x=\"0\" y=\"1\" radius=\"0\" spread=\"0\" color=\"#FFFFFFB3\" \u002F>\n        \u003C\u002Fappearance>\n\n        \u003C!-- Ruled Red Margin Line -->\n        \u003Crect w=\"2\" h=\"fill\" fill=\"#E2552F\" abs=\"true\" x=\"42\" y=\"0\" opacity=\"0.6\" \u002F>\n\n        \u003C!-- Clipboard clamp at the top -->\n        \u003Ccol w=\"80\" h=\"16\" radius=\"4\" abs=\"true\" x=\"139\" y=\"-6\" fill=\"linear-gradient(180deg, #8A8275 0%, #5E564C 100%)\" border=\"1 #FFFFFF22\">\n          \u003Cappearance>\n            \u003Ceffect type=\"drop-shadow\" x=\"0\" y=\"2\" radius=\"4\" spread=\"0\" color=\"#00000055\" \u002F>\n            \u003Ceffect type=\"inner-shadow\" x=\"0\" y=\"1\" radius=\"0\" spread=\"0\" color=\"#FFFFFF1A\" \u002F>\n          \u003C\u002Fappearance>\n        \u003C\u002Fcol>\n\n        \u003C!-- Album Metadata Header -->\n        \u003Ccol gap=\"4\" pb=\"14\" align=\"top-left\" w=\"fill\">\n          \u003Ctext text-style=\"Serif\u002FHead\" value=\"Margin Notes\" color=\"$ink\" \u002F>\n          \u003Crow gap=\"6\" align=\"middle-left\">\n            \u003Ctext text-style=\"Caption\" value=\"Chapter & Verse  ·  12 Tracks  ·  46 min\" color=\"$ink-2\" \u002F>\n          \u003C\u002Frow>\n        \u003C\u002Fcol>\n\n        \u003C!-- Ruled lines track list -->\n        \u003Ccol gap=\"0\" w=\"fill\">\n          \n          \u003C!-- Track 1 -->\n          \u003Ccol w=\"fill\">\n            \u003Crow w=\"fill\" p=\"12 4\" align=\"middle-center\" gap=\"auto\">\n              \u003Crow gap=\"22\" align=\"middle-left\">\n                \u003Ctext font-family=\"SF Pro\" font-size=\"13\" font-weight=\"700\" value=\"01\" color=\"$ink-2\" w=\"20\" align=\"center\" \u002F>\n                \u003Ctext text-style=\"Body\" value=\"Foreword\" color=\"$ink\" \u002F>\n              \u003C\u002Frow>\n              \u003Ctext text-style=\"Label\" value=\"1:42\" color=\"$ink-2\" \u002F>\n            \u003C\u002Frow>\n            \u003Cline fill=\"$hair\" \u002F>\n          \u003C\u002Fcol>\n\n          \u003C!-- Track 2 -->\n          \u003Ccol w=\"fill\">\n            \u003Crow w=\"fill\" p=\"12 4\" align=\"middle-center\" gap=\"auto\">\n              \u003Crow gap=\"22\" align=\"middle-left\">\n                \u003Ctext font-family=\"SF Pro\" font-size=\"13\" font-weight=\"700\" value=\"02\" color=\"$ink-2\" w=\"20\" align=\"center\" \u002F>\n                \u003Ctext text-style=\"Body\" value=\"Spine & Thread\" color=\"$ink\" \u002F>\n              \u003C\u002Frow>\n              \u003Ctext text-style=\"Label\" value=\"3:05\" color=\"$ink-2\" \u002F>\n            \u003C\u002Frow>\n            \u003Cline fill=\"$hair\" \u002F>\n          \u003C\u002Fcol>\n\n          \u003C!-- Track 3 (Active Playing) -->\n          \u003Ccol w=\"fill\" fill=\"#D24A2C0F\" radius=\"6\" p=\"0 6\">\n            \u003Crow w=\"fill\" p=\"12 4\" align=\"middle-center\" gap=\"auto\">\n              \u003Crow gap=\"22\" align=\"middle-left\">\n                \u003C!-- Glowing pin indicator -->\n                \u003Cellipse w=\"8\" h=\"8\" fill=\"#E2552F\" ml=\"6\">\n                  \u003Cappearance>\n                    \u003Ceffect type=\"drop-shadow\" x=\"0\" y=\"0\" radius=\"6\" spread=\"2\" color=\"#E2552FB3\" \u002F>\n                  \u003C\u002Fappearance>\n                \u003C\u002Fellipse>\n                \u003Ctext font-family=\"SF Pro\" font-size=\"15\" font-weight=\"700\" value=\"Dog-Eared\" color=\"#A82E16\" \u002F>\n                \u003C!-- Small soundwave bars -->\n                \u003Crow gap=\"3\" align=\"bottom-left\" h=\"12\" pl=\"4\">\n                  \u003Crect w=\"3\" h=\"10\" fill=\"#E2552F\" radius=\"1.5\" \u002F>\n                  \u003Crect w=\"3\" h=\"6\" fill=\"#E2552F\" radius=\"1.5\" \u002F>\n                  \u003Crect w=\"3\" h=\"12\" fill=\"#E2552F\" radius=\"1.5\" \u002F>\n                \u003C\u002Frow>\n              \u003C\u002Frow>\n              \u003Crow gap=\"10\" align=\"middle-center\">\n                \u003C!-- Recessed play\u002Fpause indicator -->\n                \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Fmdi\u002Fvolume-high.svg?color=%23A82E16\" w=\"18\" h=\"18\" \u002F>\n                \u003Ctext font-family=\"SF Pro\" font-size=\"13\" font-weight=\"700\" value=\"4:47\" color=\"#A82E16\" \u002F>\n              \u003C\u002Frow>\n            \u003C\u002Frow>\n            \u003Cline fill=\"$hair\" \u002F>\n          \u003C\u002Fcol>\n\n          \u003C!-- Track 4 -->\n          \u003Ccol w=\"fill\">\n            \u003Crow w=\"fill\" p=\"12 4\" align=\"middle-center\" gap=\"auto\">\n              \u003Crow gap=\"22\" align=\"middle-left\">\n                \u003Ctext font-family=\"SF Pro\" font-size=\"13\" font-weight=\"700\" value=\"04\" color=\"$ink-2\" w=\"20\" align=\"center\" \u002F>\n                \u003Ctext text-style=\"Body\" value=\"Footnotes\" color=\"$ink\" \u002F>\n              \u003C\u002Frow>\n              \u003Ctext text-style=\"Label\" value=\"2:38\" color=\"$ink-2\" \u002F>\n            \u003C\u002Frow>\n            \u003Cline fill=\"$hair\" \u002F>\n          \u003C\u002Fcol>\n\n          \u003C!-- Track 5 -->\n          \u003Ccol w=\"fill\">\n            \u003Crow w=\"fill\" p=\"12 4\" align=\"middle-center\" gap=\"auto\">\n              \u003Crow gap=\"22\" align=\"middle-left\">\n                \u003Ctext font-family=\"SF Pro\" font-size=\"13\" font-weight=\"700\" value=\"05\" color=\"$ink-2\" w=\"20\" align=\"center\" \u002F>\n                \u003Ctext text-style=\"Body\" value=\"The Bindery\" color=\"$ink\" \u002F>\n              \u003C\u002Frow>\n              \u003Ctext text-style=\"Label\" value=\"4:02\" color=\"$ink-2\" \u002F>\n            \u003C\u002Frow>\n            \u003Cline fill=\"$hair\" \u002F>\n          \u003C\u002Fcol>\n\n        \u003C\u002Fcol>\n      \u003C\u002Fcol>\n    \u003C\u002Fcol>\n\n  \u003C\u002Fcol>\n\u003C\u002Fgui>\n",1784753172844]