[{"data":1,"prerenderedAt":3619},["ShallowReactive",2],{"navigation-source":3,"navigation-zh":271,"docs-\u002Fzh\u002Fdocs\u002Fguides\u002Fsensors":474,"docs-surround-\u002Fzh\u002Fdocs\u002Fguides\u002Fsensors":3538,"example-activation-modes":3543,"example-can-drag":3558,"example-joystick":3569,"example-actions":3588,"example-move-menu":3604},[4],{"title":5,"path":6,"stem":7,"children":8,"page":35},"Docs","\u002Fdocs","docs",[9,36,122,198,251],{"title":10,"icon":11,"path":12,"stem":13,"children":14,"page":35},"Getting started","i-lucide-rocket","\u002Fdocs\u002Fgetting-started","docs\u002F1.getting-started",[15,20,25,30],{"title":16,"path":17,"stem":18,"icon":19},"Introduction","\u002Fdocs\u002Fgetting-started\u002Fintroduction","docs\u002F1.getting-started\u002F1.introduction","i-lucide-book-open",{"title":21,"path":22,"stem":23,"icon":24},"Installation","\u002Fdocs\u002Fgetting-started\u002Finstallation","docs\u002F1.getting-started\u002F2.installation","i-lucide-download",{"title":26,"path":27,"stem":28,"icon":29},"Quick start","\u002Fdocs\u002Fgetting-started\u002Fquick-start","docs\u002F1.getting-started\u002F3.quick-start","i-lucide-zap",{"title":31,"path":32,"stem":33,"icon":34},"Migrating from v2","\u002Fdocs\u002Fgetting-started\u002Fmigrating-from-v2","docs\u002F1.getting-started\u002F4.migrating-from-v2","i-lucide-arrow-right-left",false,{"title":37,"icon":38,"path":39,"stem":40,"children":41,"page":35},"Guides","i-lucide-book-marked","\u002Fdocs\u002Fguides","docs\u002F2.guides",[42,47,52,57,62,67,72,77,82,87,92,97,102,107,112,117],{"title":43,"path":44,"stem":45,"icon":46},"The provider","\u002Fdocs\u002Fguides\u002Fprovider","docs\u002F2.guides\u002F01.provider","i-lucide-layers",{"title":48,"path":49,"stem":50,"icon":51},"Drag and drop","\u002Fdocs\u002Fguides\u002Fdrag-and-drop","docs\u002F2.guides\u002F02.drag-and-drop","i-lucide-move",{"title":53,"path":54,"stem":55,"icon":56},"Sortable lists","\u002Fdocs\u002Fguides\u002Fsortable-lists","docs\u002F2.guides\u002F03.sortable-lists","i-lucide-list-ordered",{"title":58,"path":59,"stem":60,"icon":61},"Lists that share items","\u002Fdocs\u002Fguides\u002Fshared-lists","docs\u002F2.guides\u002F04.shared-lists","i-lucide-kanban",{"title":63,"path":64,"stem":65,"icon":66},"Trees","\u002Fdocs\u002Fguides\u002Ftrees","docs\u002F2.guides\u002F05.trees","i-lucide-folder-tree",{"title":68,"path":69,"stem":70,"icon":71},"Multi-drag and selection","\u002Fdocs\u002Fguides\u002Fmulti-drag","docs\u002F2.guides\u002F06.multi-drag","i-lucide-copy",{"title":73,"path":74,"stem":75,"icon":76},"The overlay","\u002Fdocs\u002Fguides\u002Foverlay","docs\u002F2.guides\u002F07.overlay","i-lucide-mouse-pointer-2",{"title":78,"path":79,"stem":80,"icon":81},"Axes, bounds and grids","\u002Fdocs\u002Fguides\u002Fconstraints","docs\u002F2.guides\u002F08.constraints","i-lucide-axis-3d",{"title":83,"path":84,"stem":85,"icon":86},"Deciding a drop","\u002Fdocs\u002Fguides\u002Fdrop-decisions","docs\u002F2.guides\u002F09.drop-decisions","i-lucide-check-check",{"title":88,"path":89,"stem":90,"icon":91},"Animations","\u002Fdocs\u002Fguides\u002Fanimations","docs\u002F2.guides\u002F10.animations","i-lucide-sparkles",{"title":93,"path":94,"stem":95,"icon":96},"Accessibility","\u002Fdocs\u002Fguides\u002Faccessibility","docs\u002F2.guides\u002F11.accessibility","i-lucide-accessibility",{"title":98,"path":99,"stem":100,"icon":101},"Virtual lists","\u002Fdocs\u002Fguides\u002Fvirtual-lists","docs\u002F2.guides\u002F12.virtual-lists","i-lucide-rows-3",{"title":103,"path":104,"stem":105,"icon":106},"Styling","\u002Fdocs\u002Fguides\u002Fstyling","docs\u002F2.guides\u002F13.styling","i-lucide-palette",{"title":108,"path":109,"stem":110,"icon":111},"Sensors and programmatic drags","\u002Fdocs\u002Fguides\u002Fsensors","docs\u002F2.guides\u002F14.sensors","i-lucide-joystick",{"title":113,"path":114,"stem":115,"icon":116},"DevTools","\u002Fdocs\u002Fguides\u002Fdevtools","docs\u002F2.guides\u002F15.devtools","i-lucide-bug",{"title":118,"path":119,"stem":120,"icon":121},"Files and other apps","\u002Fdocs\u002Fguides\u002Fnative","docs\u002F2.guides\u002F16.native","i-lucide-app-window",{"title":123,"icon":124,"path":125,"stem":126,"children":127,"page":35},"API","i-lucide-braces","\u002Fdocs\u002Fapi","docs\u002F3.api",[128,133,137,142,146,151,156,161,166,171,175,180,184,188,193],{"title":129,"path":130,"stem":131,"icon":132},"DnDProvider","\u002Fdocs\u002Fapi\u002Fdnd-provider","docs\u002F3.api\u002F01.dnd-provider","i-lucide-box",{"title":134,"path":135,"stem":136,"icon":51},"makeDraggable","\u002Fdocs\u002Fapi\u002Fmake-draggable","docs\u002F3.api\u002F02.make-draggable",{"title":138,"path":139,"stem":140,"icon":141},"makeDroppable","\u002Fdocs\u002Fapi\u002Fmake-droppable","docs\u002F3.api\u002F03.make-droppable","i-lucide-inbox",{"title":143,"path":144,"stem":145,"icon":56},"makeSortableList","\u002Fdocs\u002Fapi\u002Fmake-sortable-list","docs\u002F3.api\u002F04.make-sortable-list",{"title":147,"path":148,"stem":149,"icon":150},"makeSortableItem","\u002Fdocs\u002Fapi\u002Fmake-sortable-item","docs\u002F3.api\u002F05.make-sortable-item","i-lucide-grip-vertical",{"title":152,"path":153,"stem":154,"icon":155},"makeSortableTree","\u002Fdocs\u002Fapi\u002Fmake-sortable-tree","docs\u002F3.api\u002F06.make-sortable-tree","i-lucide-list-tree",{"title":157,"path":158,"stem":159,"icon":160},"makeSelectionArea","\u002Fdocs\u002Fapi\u002Fmake-selection-area","docs\u002F3.api\u002F07.make-selection-area","i-lucide-square-dashed-mouse-pointer",{"title":162,"path":163,"stem":164,"icon":165},"makeDragArea","\u002Fdocs\u002Fapi\u002Fmake-drag-area","docs\u002F3.api\u002F08.make-drag-area","i-lucide-frame",{"title":167,"path":168,"stem":169,"icon":170},"useDnD and monitors","\u002Fdocs\u002Fapi\u002Fuse-dnd","docs\u002F3.api\u002F09.use-dnd","i-lucide-radio",{"title":172,"path":173,"stem":174,"icon":29},"Events","\u002Fdocs\u002Fapi\u002Fevents","docs\u002F3.api\u002F10.events",{"title":176,"path":177,"stem":178,"icon":179},"Modifiers and collision","\u002Fdocs\u002Fapi\u002Fmodifiers","docs\u002F3.api\u002F11.modifiers","i-lucide-sliders-horizontal",{"title":181,"path":182,"stem":183,"icon":71},"DragPreview and overlay props","\u002Fdocs\u002Fapi\u002Fdrag-preview","docs\u002F3.api\u002F12.drag-preview",{"title":88,"path":185,"stem":186,"icon":187},"\u002Fdocs\u002Fapi\u002Fanimations","docs\u002F3.api\u002F13.animations","i-lucide-wand-sparkles",{"title":189,"path":190,"stem":191,"icon":192},"Sensors","\u002Fdocs\u002Fapi\u002Fsensors","docs\u002F3.api\u002F14.sensors","i-lucide-gamepad-2",{"title":194,"path":195,"stem":196,"icon":197},"Common types","\u002Fdocs\u002Fapi\u002Ftypes","docs\u002F3.api\u002F15.types","i-lucide-shapes",{"title":199,"path":200,"stem":201,"children":202,"icon":205},"Examples","\u002Fdocs\u002Fexamples","docs\u002F4.examples\u002F00.index",[203,206,211,216,221,226,231,236,241,246],{"title":204,"path":200,"stem":201,"icon":205},"Overview","i-lucide-layout-grid",{"title":207,"path":208,"stem":209,"icon":210},"Project board","\u002Fdocs\u002Fexamples\u002Fboard","docs\u002F4.examples\u002F01.board","i-lucide-square-kanban",{"title":212,"path":213,"stem":214,"icon":215},"Week calendar","\u002Fdocs\u002Fexamples\u002Fcalendar","docs\u002F4.examples\u002F02.calendar","i-lucide-calendar-days",{"title":217,"path":218,"stem":219,"icon":220},"File manager","\u002Fdocs\u002Fexamples\u002Ffile-manager","docs\u002F4.examples\u002F03.file-manager","i-lucide-folder-open",{"title":222,"path":223,"stem":224,"icon":225},"Block editor","\u002Fdocs\u002Fexamples\u002Fblock-editor","docs\u002F4.examples\u002F04.block-editor","i-lucide-blocks",{"title":227,"path":228,"stem":229,"icon":230},"Chess","\u002Fdocs\u002Fexamples\u002Fchess","docs\u002F4.examples\u002F05.chess","i-lucide-chess-knight",{"title":232,"path":233,"stem":234,"icon":235},"Form builder","\u002Fdocs\u002Fexamples\u002Fform-builder","docs\u002F4.examples\u002F06.form-builder","i-lucide-text-cursor-input",{"title":237,"path":238,"stem":239,"icon":240},"Design canvas","\u002Fdocs\u002Fexamples\u002Fdesign-canvas","docs\u002F4.examples\u002F07.design-canvas","i-lucide-pen-tool",{"title":242,"path":243,"stem":244,"icon":245},"Page builder","\u002Fdocs\u002Fexamples\u002Fpage-builder","docs\u002F4.examples\u002F08.page-builder","i-lucide-layout-template",{"title":247,"path":248,"stem":249,"icon":250},"Data table","\u002Fdocs\u002Fexamples\u002Fdata-table","docs\u002F4.examples\u002F09.data-table","i-lucide-table-2",{"title":252,"path":253,"stem":254,"children":255,"icon":257},"Changelog","\u002Fdocs\u002Fchangelog","docs\u002F5.changelog\u002F0.index",[256,258,263,267],{"title":204,"path":253,"stem":254,"icon":257},"i-lucide-history",{"title":259,"path":260,"stem":261,"icon":262},"3.0.0","\u002Fdocs\u002Fchangelog\u002Fv3-0-0","docs\u002F5.changelog\u002F997.v3-0-0","i-lucide-tag",{"title":264,"path":265,"stem":266,"icon":262},"3.0.0-beta.2","\u002Fdocs\u002Fchangelog\u002Fv3-0-0-beta-2","docs\u002F5.changelog\u002F998.v3-0-0-beta-2",{"title":268,"path":269,"stem":270,"icon":262},"3.0.0-beta.1","\u002Fdocs\u002Fchangelog\u002Fv3-0-0-beta-1","docs\u002F5.changelog\u002F999.v3-0-0-beta-1",[272],{"title":273,"path":274,"stem":275,"children":276,"page":35},"Zh","\u002Fzh","zh",[277],{"title":278,"source":279,"path":280,"stem":281,"children":282,"page":35},"文档","6556add362","\u002Fzh\u002Fdocs","zh\u002Fdocs",[283,305,374,430],{"title":284,"source":285,"icon":11,"path":286,"stem":287,"children":288,"page":35},"开始","e345edbff3","\u002Fzh\u002Fdocs\u002Fgetting-started","zh\u002Fdocs\u002F1.getting-started",[289,293,297,301],{"title":290,"path":291,"stem":292,"icon":19},"简介","\u002Fzh\u002Fdocs\u002Fgetting-started\u002Fintroduction","zh\u002Fdocs\u002F1.getting-started\u002F1.introduction",{"title":294,"path":295,"stem":296,"icon":24},"安装","\u002Fzh\u002Fdocs\u002Fgetting-started\u002Finstallation","zh\u002Fdocs\u002F1.getting-started\u002F2.installation",{"title":298,"path":299,"stem":300,"icon":29},"快速上手","\u002Fzh\u002Fdocs\u002Fgetting-started\u002Fquick-start","zh\u002Fdocs\u002F1.getting-started\u002F3.quick-start",{"title":302,"path":303,"stem":304,"icon":34},"从 v2 迁移","\u002Fzh\u002Fdocs\u002Fgetting-started\u002Fmigrating-from-v2","zh\u002Fdocs\u002F1.getting-started\u002F4.migrating-from-v2",{"title":306,"source":307,"icon":38,"path":308,"stem":309,"children":310,"page":35},"指南","0338bbaa33","\u002Fzh\u002Fdocs\u002Fguides","zh\u002Fdocs\u002F2.guides",[311,315,319,323,327,331,335,339,343,347,351,355,359,363,367,370],{"title":312,"path":313,"stem":314,"icon":46},"Provider","\u002Fzh\u002Fdocs\u002Fguides\u002Fprovider","zh\u002Fdocs\u002F2.guides\u002F01.provider",{"title":316,"path":317,"stem":318,"icon":51},"拖放","\u002Fzh\u002Fdocs\u002Fguides\u002Fdrag-and-drop","zh\u002Fdocs\u002F2.guides\u002F02.drag-and-drop",{"title":320,"path":321,"stem":322,"icon":56},"可排序列表","\u002Fzh\u002Fdocs\u002Fguides\u002Fsortable-lists","zh\u002Fdocs\u002F2.guides\u002F03.sortable-lists",{"title":324,"path":325,"stem":326,"icon":61},"共享项的列表","\u002Fzh\u002Fdocs\u002Fguides\u002Fshared-lists","zh\u002Fdocs\u002F2.guides\u002F04.shared-lists",{"title":328,"path":329,"stem":330,"icon":66},"树","\u002Fzh\u002Fdocs\u002Fguides\u002Ftrees","zh\u002Fdocs\u002F2.guides\u002F05.trees",{"title":332,"path":333,"stem":334,"icon":71},"多项拖拽与选择","\u002Fzh\u002Fdocs\u002Fguides\u002Fmulti-drag","zh\u002Fdocs\u002F2.guides\u002F06.multi-drag",{"title":336,"path":337,"stem":338,"icon":76},"浮层","\u002Fzh\u002Fdocs\u002Fguides\u002Foverlay","zh\u002Fdocs\u002F2.guides\u002F07.overlay",{"title":340,"path":341,"stem":342,"icon":81},"轴、边界与网格","\u002Fzh\u002Fdocs\u002Fguides\u002Fconstraints","zh\u002Fdocs\u002F2.guides\u002F08.constraints",{"title":344,"path":345,"stem":346,"icon":86},"决定放置","\u002Fzh\u002Fdocs\u002Fguides\u002Fdrop-decisions","zh\u002Fdocs\u002F2.guides\u002F09.drop-decisions",{"title":348,"path":349,"stem":350,"icon":91},"动画","\u002Fzh\u002Fdocs\u002Fguides\u002Fanimations","zh\u002Fdocs\u002F2.guides\u002F10.animations",{"title":352,"path":353,"stem":354,"icon":96},"无障碍","\u002Fzh\u002Fdocs\u002Fguides\u002Faccessibility","zh\u002Fdocs\u002F2.guides\u002F11.accessibility",{"title":356,"path":357,"stem":358,"icon":101},"虚拟列表","\u002Fzh\u002Fdocs\u002Fguides\u002Fvirtual-lists","zh\u002Fdocs\u002F2.guides\u002F12.virtual-lists",{"title":360,"path":361,"stem":362,"icon":106},"样式","\u002Fzh\u002Fdocs\u002Fguides\u002Fstyling","zh\u002Fdocs\u002F2.guides\u002F13.styling",{"title":364,"path":365,"stem":366,"icon":111},"传感器与程序化拖拽","\u002Fzh\u002Fdocs\u002Fguides\u002Fsensors","zh\u002Fdocs\u002F2.guides\u002F14.sensors",{"title":113,"path":368,"stem":369,"icon":116},"\u002Fzh\u002Fdocs\u002Fguides\u002Fdevtools","zh\u002Fdocs\u002F2.guides\u002F15.devtools",{"title":371,"path":372,"stem":373,"icon":121},"文件与其他应用","\u002Fzh\u002Fdocs\u002Fguides\u002Fnative","zh\u002Fdocs\u002F2.guides\u002F16.native",{"title":123,"source":375,"icon":124,"path":376,"stem":377,"children":378,"page":35},"5c96005c70","\u002Fzh\u002Fdocs\u002Fapi","zh\u002Fdocs\u002F3.api",[379,382,385,388,391,394,397,400,403,407,411,415,419,422,426],{"title":129,"path":380,"stem":381,"icon":132},"\u002Fzh\u002Fdocs\u002Fapi\u002Fdnd-provider","zh\u002Fdocs\u002F3.api\u002F01.dnd-provider",{"title":134,"path":383,"stem":384,"icon":51},"\u002Fzh\u002Fdocs\u002Fapi\u002Fmake-draggable","zh\u002Fdocs\u002F3.api\u002F02.make-draggable",{"title":138,"path":386,"stem":387,"icon":141},"\u002Fzh\u002Fdocs\u002Fapi\u002Fmake-droppable","zh\u002Fdocs\u002F3.api\u002F03.make-droppable",{"title":143,"path":389,"stem":390,"icon":56},"\u002Fzh\u002Fdocs\u002Fapi\u002Fmake-sortable-list","zh\u002Fdocs\u002F3.api\u002F04.make-sortable-list",{"title":147,"path":392,"stem":393,"icon":150},"\u002Fzh\u002Fdocs\u002Fapi\u002Fmake-sortable-item","zh\u002Fdocs\u002F3.api\u002F05.make-sortable-item",{"title":152,"path":395,"stem":396,"icon":155},"\u002Fzh\u002Fdocs\u002Fapi\u002Fmake-sortable-tree","zh\u002Fdocs\u002F3.api\u002F06.make-sortable-tree",{"title":157,"path":398,"stem":399,"icon":160},"\u002Fzh\u002Fdocs\u002Fapi\u002Fmake-selection-area","zh\u002Fdocs\u002F3.api\u002F07.make-selection-area",{"title":162,"path":401,"stem":402,"icon":165},"\u002Fzh\u002Fdocs\u002Fapi\u002Fmake-drag-area","zh\u002Fdocs\u002F3.api\u002F08.make-drag-area",{"title":404,"path":405,"stem":406,"icon":170},"useDnD 与监听器","\u002Fzh\u002Fdocs\u002Fapi\u002Fuse-dnd","zh\u002Fdocs\u002F3.api\u002F09.use-dnd",{"title":408,"path":409,"stem":410,"icon":29},"事件","\u002Fzh\u002Fdocs\u002Fapi\u002Fevents","zh\u002Fdocs\u002F3.api\u002F10.events",{"title":412,"path":413,"stem":414,"icon":179},"修饰器与碰撞检测","\u002Fzh\u002Fdocs\u002Fapi\u002Fmodifiers","zh\u002Fdocs\u002F3.api\u002F11.modifiers",{"title":416,"path":417,"stem":418,"icon":71},"DragPreview 与浮层 props","\u002Fzh\u002Fdocs\u002Fapi\u002Fdrag-preview","zh\u002Fdocs\u002F3.api\u002F12.drag-preview",{"title":348,"path":420,"stem":421,"icon":187},"\u002Fzh\u002Fdocs\u002Fapi\u002Fanimations","zh\u002Fdocs\u002F3.api\u002F13.animations",{"title":423,"path":424,"stem":425,"icon":192},"传感器","\u002Fzh\u002Fdocs\u002Fapi\u002Fsensors","zh\u002Fdocs\u002F3.api\u002F14.sensors",{"title":427,"path":428,"stem":429,"icon":197},"通用类型","\u002Fzh\u002Fdocs\u002Fapi\u002Ftypes","zh\u002Fdocs\u002F3.api\u002F15.types",{"title":431,"path":432,"stem":433,"children":434,"icon":205,"source":473},"示例","\u002Fzh\u002Fdocs\u002Fexamples","zh\u002Fdocs\u002F4.examples\u002F00.index",[435,437,441,445,449,453,457,461,465,469],{"title":436,"path":432,"stem":433,"icon":205},"概览",{"title":438,"path":439,"stem":440,"icon":210},"项目看板","\u002Fzh\u002Fdocs\u002Fexamples\u002Fboard","zh\u002Fdocs\u002F4.examples\u002F01.board",{"title":442,"path":443,"stem":444,"icon":215},"周日历","\u002Fzh\u002Fdocs\u002Fexamples\u002Fcalendar","zh\u002Fdocs\u002F4.examples\u002F02.calendar",{"title":446,"path":447,"stem":448,"icon":220},"文件管理器","\u002Fzh\u002Fdocs\u002Fexamples\u002Ffile-manager","zh\u002Fdocs\u002F4.examples\u002F03.file-manager",{"title":450,"path":451,"stem":452,"icon":225},"块编辑器","\u002Fzh\u002Fdocs\u002Fexamples\u002Fblock-editor","zh\u002Fdocs\u002F4.examples\u002F04.block-editor",{"title":454,"path":455,"stem":456,"icon":230},"国际象棋","\u002Fzh\u002Fdocs\u002Fexamples\u002Fchess","zh\u002Fdocs\u002F4.examples\u002F05.chess",{"title":458,"path":459,"stem":460,"icon":235},"表单构建器","\u002Fzh\u002Fdocs\u002Fexamples\u002Fform-builder","zh\u002Fdocs\u002F4.examples\u002F06.form-builder",{"title":462,"path":463,"stem":464,"icon":240},"设计画布","\u002Fzh\u002Fdocs\u002Fexamples\u002Fdesign-canvas","zh\u002Fdocs\u002F4.examples\u002F07.design-canvas",{"title":466,"path":467,"stem":468,"icon":245},"页面构建器","\u002Fzh\u002Fdocs\u002Fexamples\u002Fpage-builder","zh\u002Fdocs\u002F4.examples\u002F08.page-builder",{"title":470,"path":471,"stem":472,"icon":250},"数据表格","\u002Fzh\u002Fdocs\u002Fexamples\u002Fdata-table","zh\u002Fdocs\u002F4.examples\u002F09.data-table","bd60379aec",{"page":475,"fallback":35},{"id":476,"title":364,"body":477,"category":306,"description":3530,"extension":3531,"links":3532,"meta":3533,"navigation":3535,"path":365,"seo":3536,"stem":366,"__hash__":3537},"docs_zh\u002Fzh\u002Fdocs\u002F2.guides\u002F14.sensors.md",{"type":478,"value":479,"toc":3512},"minimark",[480,484,489,537,544,607,630,634,637,643,646,699,702,744,749,763,839,982,990,994,1015,1172,1190,1194,1208,1296,1303,1307,1325,1330,1508,1565,1577,1631,1637,1640,1654,1659,1671,1781,1788,2069,2072,2282,2296,2300,2306,2382,2387,2516,2522,2637,2645,2665,2669,2693,2698,2716,2720,2866,2902,2908,2912,3089,3104,3108,3118,3123,3285,3302,3306,3315,3453,3489,3508],[481,482,483],"p",{},"传感器把输入变成拖拽。它只告诉 provider“从这里拖拽这个项”，然后告诉它输入移动到了哪里，以及是放下了还是取消了。其余的都由 provider 完成，对每个传感器都一样：一次一个拖拽、拒绝禁用的项、激活约束、排序、自动滚动、播报、:kbd{value=\"Escape\"} 以及整个放置过程。",[485,486,488],"h2",{"id":487},"the-built-in-sensors","内置传感器",[490,491,492,504],"table",{},[493,494,495],"thead",{},[496,497,498,501],"tr",{},[499,500,423],"th",{},[499,502,503],{},"输入",[505,506,507,519],"tbody",{},[496,508,509,516],{},[510,511,512],"td",{},[513,514,515],"code",{},"pointerSensor",[510,517,518],{},"通过 Pointer Events 处理鼠标、触摸和触控笔。它会捕获指针，防止页面在触摸拖拽时选中文本或滚动，并吞掉拖拽之后的那次点击。",[496,520,521,526],{},[510,522,523],{},[513,524,525],{},"keyboardSensor",[510,527,528,532,533,536],{},[529,530],"kbd",{"value":531},"Space"," 和 ",[529,534],{"value":535},"Enter"," 拿起和放下，方向键移动，:kbd{value=\"Escape\"} 取消——任何拖拽都可以，指针拖拽也一样。",[481,538,539,540,543],{},"两者默认都会运行。provider 的 ",[513,541,542],{},"sensors"," 会替换这个列表：",[545,546,551],"pre",{"className":547,"code":548,"language":549,"meta":550,"style":550},"language-vue shiki shiki-themes dnd-light dnd-light dnd-dark","\u003CDnDProvider :sensors=\"[pointerSensor, keyboardSensor, joystick.sensor]\">\n","vue","",[513,552,553],{"__ignoreMap":550},[554,555,558,562,566,569,572,576,579,582,585,588,590,593,596,599,602,604],"span",{"class":556,"line":557},"line",1,[554,559,561],{"class":560},"sf6mc","\u003CDnDProvider",[554,563,565],{"class":564},"s6cML"," :",[554,567,542],{"class":568},"sVvmN",[554,570,571],{"class":564},"=",[554,573,575],{"class":574},"sN8r7","\"",[554,577,578],{"class":564},"[",[554,580,515],{"class":581},"snmWg",[554,583,584],{"class":564},",",[554,586,587],{"class":581}," keyboardSensor",[554,589,584],{"class":564},[554,591,592],{"class":581}," joystick",[554,594,595],{"class":564},".",[554,597,598],{"class":581},"sensor",[554,600,601],{"class":564},"]",[554,603,575],{"class":574},[554,605,606],{"class":560},">\n",[481,608,609,610,613,614,616,617,620,621,624,625,629],{},"要关闭键盘拖拽，优先使用 ",[513,611,612],{},":keyboard=\"false\"","，而不是去掉 ",[513,615,525],{},"：键盘传感器同时也负责用 ",[529,618],{"value":619},"Escape"," 取消任何拖拽。它的按键可以用 ",[513,622,623],{},"keyboard.keys"," 重新绑定（见",[626,627,352],"a",{"href":628},"\u002Fdocs\u002Fguides\u002Faccessibility#the-keyboard","）。",[485,631,633],{"id":632},"activation-constraints","激活约束",[481,635,636],{},"按下不会立刻开始拖拽：它会等待激活约束满足，这样点击仍然是点击，滑动仍然可以滚动页面。切换这个列表的规则，然后按住一行：",[638,639],"example",{"height":640,"hint":641,"name":642},"34.5rem","按住一行直到圆环闭合，或切换规则","activation-modes",[481,644,645],{},"约束有三个字段：",[490,647,648,658],{},[493,649,650],{},[496,651,652,655],{},[499,653,654],{},"字段",[499,656,657],{},"拖拽开始于……",[505,659,660,670,683],{},[496,661,662,667],{},[510,663,664],{},[513,665,666],{},"distance",[510,668,669],{},"指针移动了这么多 px 之后。",[496,671,672,677],{},[510,673,674],{},[513,675,676],{},"delay",[510,678,679,680,682],{},"按下持续了这么多 ms 之后。同时设置了 ",[513,681,666],{}," 时，取先满足的那个。",[496,684,685,690],{},[510,686,687],{},[513,688,689],{},"tolerance",[510,691,692,693,695,696,698],{},"与 ",[513,694,676],{}," 配合：等待期间指针可以移动多远。超出时按下放弃，让页面可以滚动。没有 ",[513,697,666],{}," 时默认为 5 px。",[481,700,701],{},"没有自定义约束时，每种指针类型都有自己的默认值：",[490,703,704,714],{},[493,705,706],{},[496,707,708,711],{},[499,709,710],{},"指针",[499,712,713],{},"默认值",[505,715,716,728,736],{},[496,717,718,721],{},[510,719,720],{},"鼠标",[510,722,723,724,727],{},"移动 4 px 之后。在 ",[513,725,726],{},"handle"," 上按下时立即开始，除非设置了鼠标约束。",[496,729,730,733],{},[510,731,732],{},"触控笔",[510,734,735],{},"移动 4 px 之后。",[496,737,738,741],{},[510,739,740],{},"触摸",[510,742,743],{},"按下 200 ms 之后。在此之前移动超过 5 px 会放弃，改为滚动页面。",[745,746,748],"h3",{"id":747},"where-to-set-them","在哪里设置",[481,750,751,752,755,756,755,759,762],{},"按指针类型——",[513,753,754],{},"mouse","、",[513,757,758],{},"touch",[513,760,761],{},"pen","——设置在 provider、拖拽区域或项上。对于每种类型，项自己的优先，然后是它所在区域的，最后是 provider 的：",[545,764,766],{"className":547,"code":765,"language":549,"meta":550,"style":550},"\u003CDnDProvider :activation=\"{ mouse: { distance: 8 }, touch: { delay: 250, tolerance: 5 } }\">\n",[513,767,768],{"__ignoreMap":550},[554,769,770,772,774,777,779,781,784,787,790,793,796,798,802,805,808,810,812,815,817,820,822,825,827,830,833,835,837],{"class":556,"line":557},[554,771,561],{"class":560},[554,773,565],{"class":564},[554,775,776],{"class":568},"activation",[554,778,571],{"class":564},[554,780,575],{"class":574},[554,782,783],{"class":564},"{",[554,785,786],{"class":568}," mouse",[554,788,789],{"class":564},":",[554,791,792],{"class":564}," {",[554,794,795],{"class":568}," distance",[554,797,789],{"class":564},[554,799,801],{"class":800},"s3IRZ"," 8",[554,803,804],{"class":564}," },",[554,806,807],{"class":568}," touch",[554,809,789],{"class":564},[554,811,792],{"class":564},[554,813,814],{"class":568}," delay",[554,816,789],{"class":564},[554,818,819],{"class":800}," 250",[554,821,584],{"class":564},[554,823,824],{"class":568}," tolerance",[554,826,789],{"class":564},[554,828,829],{"class":800}," 5",[554,831,832],{"class":564}," }",[554,834,832],{"class":564},[554,836,575],{"class":574},[554,838,606],{"class":560},[545,840,844],{"className":841,"code":842,"language":843,"meta":550,"style":550},"language-ts shiki shiki-themes dnd-light dnd-light dnd-dark","\u002F\u002F Inbox.vue: the rules of every drag that starts inside the panel.\nmakeDragArea(panel, { activation: () => MODES[mode.value].activation });\n\n\u002F\u002F One item: a longer press by touch, the area's rule for the mouse.\nmakeSortableItem(el, { item: () => props.task, activation: { touch: { delay: 400, tolerance: 8 } } });\n","ts",[513,845,846,852,902,909,915],{"__ignoreMap":550},[554,847,848],{"class":556,"line":557},[554,849,851],{"class":850},"sytrG","\u002F\u002F Inbox.vue: the rules of every drag that starts inside the panel.\n",[554,853,855,858,861,864,866,868,871,873,876,880,883,885,888,890,893,896,899],{"class":556,"line":854},2,[554,856,162],{"class":857},"sbwC8",[554,859,860],{"class":564},"(",[554,862,863],{"class":581},"panel",[554,865,584],{"class":564},[554,867,792],{"class":564},[554,869,870],{"class":857}," activation",[554,872,789],{"class":564},[554,874,875],{"class":564}," ()",[554,877,879],{"class":878},"s78Kj"," =>",[554,881,882],{"class":581}," MODES",[554,884,578],{"class":564},[554,886,887],{"class":581},"mode",[554,889,595],{"class":564},[554,891,892],{"class":581},"value",[554,894,895],{"class":564},"].",[554,897,898],{"class":581},"activation ",[554,900,901],{"class":564},"});\n",[554,903,905],{"class":556,"line":904},3,[554,906,908],{"emptyLinePlaceholder":907},true,"\n",[554,910,912],{"class":556,"line":911},4,[554,913,914],{"class":850},"\u002F\u002F One item: a longer press by touch, the area's rule for the mouse.\n",[554,916,918,920,922,925,927,929,932,934,936,938,941,943,946,948,950,952,954,956,958,960,962,964,967,969,971,973,975,977,979],{"class":556,"line":917},5,[554,919,147],{"class":857},[554,921,860],{"class":564},[554,923,924],{"class":581},"el",[554,926,584],{"class":564},[554,928,792],{"class":564},[554,930,931],{"class":857}," item",[554,933,789],{"class":564},[554,935,875],{"class":564},[554,937,879],{"class":878},[554,939,940],{"class":581}," props",[554,942,595],{"class":564},[554,944,945],{"class":581},"task",[554,947,584],{"class":564},[554,949,870],{"class":568},[554,951,789],{"class":564},[554,953,792],{"class":564},[554,955,807],{"class":568},[554,957,789],{"class":564},[554,959,792],{"class":564},[554,961,814],{"class":568},[554,963,789],{"class":564},[554,965,966],{"class":800}," 400",[554,968,584],{"class":564},[554,970,824],{"class":568},[554,972,789],{"class":564},[554,974,801],{"class":800},[554,976,832],{"class":564},[554,978,832],{"class":564},[554,980,981],{"class":564}," });\n",[481,983,984,985,989],{},"这些选项在按下开始时读取，所以 getter 或 ref 可以实时切换它们，就像演示那样。键盘拖拽立即开始。",[626,986,988],{"href":987},"#a-sensor-of-your-own","自定义传感器","可以要求它自己的约束，或某种指针类型所配置的约束。",[745,991,993],{"id":992},"a-long-press-ring","长按圆环",[481,995,996,997,1000,1001,1004,1005,1008,1009,1011,1012,1014],{},"按下等待期间，",[513,998,999],{},"useDnD().status"," 为 ",[513,1002,1003],{},"'activating'","，",[513,1006,1007],{},"activation.progress"," 从 0 走到 1——使用 ",[513,1010,676],{}," 时按时间，使用 ",[513,1013,666],{}," 时按移动的距离。演示在按下的位置画出一个圆环：",[545,1016,1019],{"className":547,"code":1017,"filename":1018,"language":549,"meta":550,"style":550},"\u003Cscript setup lang=\"ts\">\nconst { status, activation } = useDnD();\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Csvg v-if=\"status === 'activating'\" class=\"ring\" viewBox=\"0 0 40 40\">\n    \u003Ccircle cx=\"20\" cy=\"20\" r=\"17\" pathLength=\"1\" :stroke-dasharray=\"`${activation.progress.value} 1`\" \u002F>\n  \u003C\u002Fsvg>\n\u003C\u002Ftemplate>\n","Inbox.vue",[513,1020,1021,1039,1066,1071,1075,1080,1112,1160,1166],{"__ignoreMap":550},[554,1022,1023,1026,1029,1032,1034,1037],{"class":556,"line":557},[554,1024,1025],{"class":560},"\u003Cscript",[554,1027,1028],{"class":568}," setup",[554,1030,1031],{"class":568}," lang",[554,1033,571],{"class":564},[554,1035,1036],{"class":574},"\"ts\"",[554,1038,606],{"class":560},[554,1040,1041,1044,1046,1049,1051,1054,1057,1060,1063],{"class":556,"line":854},[554,1042,1043],{"class":878},"const",[554,1045,792],{"class":564},[554,1047,1048],{"class":581}," status",[554,1050,584],{"class":564},[554,1052,1053],{"class":581}," activation ",[554,1055,1056],{"class":564},"}",[554,1058,1059],{"class":564}," =",[554,1061,1062],{"class":857}," useDnD",[554,1064,1065],{"class":564},"();\n",[554,1067,1068],{"class":556,"line":904},[554,1069,1070],{"class":560},"\u003C\u002Fscript>\n",[554,1072,1073],{"class":556,"line":911},[554,1074,908],{"emptyLinePlaceholder":907},[554,1076,1077],{"class":556,"line":917},[554,1078,1079],{"class":560},"\u003Ctemplate>\n",[554,1081,1083,1086,1089,1091,1094,1097,1099,1102,1105,1107,1110],{"class":556,"line":1082},6,[554,1084,1085],{"class":560},"  \u003Csvg",[554,1087,1088],{"class":568}," v-if",[554,1090,571],{"class":564},[554,1092,1093],{"class":574},"\"status === 'activating'\"",[554,1095,1096],{"class":568}," class",[554,1098,571],{"class":564},[554,1100,1101],{"class":574},"\"ring\"",[554,1103,1104],{"class":568}," viewBox",[554,1106,571],{"class":564},[554,1108,1109],{"class":574},"\"0 0 40 40\"",[554,1111,606],{"class":560},[554,1113,1115,1118,1121,1123,1126,1129,1131,1133,1136,1138,1141,1144,1146,1149,1152,1154,1157],{"class":556,"line":1114},7,[554,1116,1117],{"class":560},"    \u003Ccircle",[554,1119,1120],{"class":568}," cx",[554,1122,571],{"class":564},[554,1124,1125],{"class":574},"\"20\"",[554,1127,1128],{"class":568}," cy",[554,1130,571],{"class":564},[554,1132,1125],{"class":574},[554,1134,1135],{"class":568}," r",[554,1137,571],{"class":564},[554,1139,1140],{"class":574},"\"17\"",[554,1142,1143],{"class":568}," pathLength",[554,1145,571],{"class":564},[554,1147,1148],{"class":574},"\"1\"",[554,1150,1151],{"class":568}," :stroke-dasharray",[554,1153,571],{"class":564},[554,1155,1156],{"class":574},"\"`${activation.progress.value} 1`\"",[554,1158,1159],{"class":560}," \u002F>\n",[554,1161,1163],{"class":556,"line":1162},8,[554,1164,1165],{"class":560},"  \u003C\u002Fsvg>\n",[554,1167,1169],{"class":556,"line":1168},9,[554,1170,1171],{"class":560},"\u003C\u002Ftemplate>\n",[481,1173,1174,1175,1178,1179,1181,1182,1185,1186,1189],{},"给圆环设置 ",[513,1176,1177],{},"pointer-events: none","：它位于指针下方，而拖拽要对那里的东西做命中测试。放弃的按下——移动超出了 ",[513,1180,689],{},"，或松开得太早——会让 ",[513,1183,1184],{},"status"," 直接回到 ",[513,1187,1188],{},"'idle'","。",[745,1191,1193],{"id":1192},"handles-start-at-once","手柄立即开始",[481,1195,1196,1197,1199,1200,1203,1204,1207],{},"有 ",[513,1198,726],{}," 时，只有手柄能开始拖拽，在它上面按下鼠标会立即开始拖拽：抓住抓手这个动作已经没有需要区分的了。在按下的地方松开仍然是点击，所以抓手可以在 ",[513,1201,1202],{},"click"," 时打开菜单（指针只在移动后才会被捕获）。触摸仍会等待长按，除非手柄无法滚动页面。给手柄加上 ",[513,1205,1206],{},"touch-action: none","，并给项设置一个较短的距离：",[545,1209,1212],{"className":841,"code":1210,"filename":1211,"language":843,"meta":550,"style":550},"makeSortableItem(el, {\n  item: () => props.chat,\n  handle: '.grip',\n  \u002F\u002F The grip has `touch-action: none`: a touch on it can't scroll, so it drags after 4 px.\n  activation: { touch: { distance: 4 } },\n});\n","Message.vue",[513,1213,1214,1227,1248,1260,1265,1292],{"__ignoreMap":550},[554,1215,1216,1218,1220,1222,1224],{"class":556,"line":557},[554,1217,147],{"class":857},[554,1219,860],{"class":564},[554,1221,924],{"class":581},[554,1223,584],{"class":564},[554,1225,1226],{"class":564}," {\n",[554,1228,1229,1232,1234,1236,1238,1240,1242,1245],{"class":556,"line":854},[554,1230,1231],{"class":857},"  item",[554,1233,789],{"class":564},[554,1235,875],{"class":564},[554,1237,879],{"class":878},[554,1239,940],{"class":581},[554,1241,595],{"class":564},[554,1243,1244],{"class":581},"chat",[554,1246,1247],{"class":564},",\n",[554,1249,1250,1253,1255,1258],{"class":556,"line":904},[554,1251,1252],{"class":568},"  handle",[554,1254,789],{"class":564},[554,1256,1257],{"class":574}," '.grip'",[554,1259,1247],{"class":564},[554,1261,1262],{"class":556,"line":911},[554,1263,1264],{"class":850},"  \u002F\u002F The grip has `touch-action: none`: a touch on it can't scroll, so it drags after 4 px.\n",[554,1266,1267,1270,1272,1274,1276,1278,1280,1282,1284,1287,1289],{"class":556,"line":917},[554,1268,1269],{"class":568},"  activation",[554,1271,789],{"class":564},[554,1273,792],{"class":564},[554,1275,807],{"class":568},[554,1277,789],{"class":564},[554,1279,792],{"class":564},[554,1281,795],{"class":568},[554,1283,789],{"class":564},[554,1285,1286],{"class":800}," 4",[554,1288,832],{"class":564},[554,1290,1291],{"class":564}," },\n",[554,1293,1294],{"class":556,"line":1082},[554,1295,901],{"class":564},[481,1297,1298,1299,1302],{},"在项、它所在区域或 provider 上设置的鼠标约束，同样适用于手柄。像演示那样把抓手做成 ",[513,1300,1301],{},"\u003Cbutton>","：它能获得焦点，所以键盘拖拽也能从它开始。",[485,1304,1306],{"id":1305},"only-some-presses","只允许部分按下",[481,1308,1309,1312,1313,1316,1317,1320,1321,1324],{},[513,1310,1311],{},"canDrag"," 是可拖拽元素和可排序项上的又一道关卡。它接收输入事件，并针对这次按下回答 ",[513,1314,1315],{},"true"," 或 ",[513,1318,1319],{},"false","。这里指针拖拽需要按住 ",[529,1322],{"value":1323},"Shift","；键盘照常拖拽：",[638,1326],{"height":1327,"hint":1328,"name":1329},"28rem","按住和不按 Shift 分别拖动一行；勾选复选框，选择负责人","can-drag",[545,1331,1334],{"className":841,"code":1332,"filename":1333,"language":843,"meta":550,"style":550},"makeSortableItem(el, {\n  item: () => props.task,\n  \u002F\u002F Never: the row is locked (and says so to screen readers with aria-disabled).\n  disabled: () => !!props.task.locked,\n  \u002F\u002F Per press: pointer drags only with Shift held; the keyboard as usual.\n  canDrag: (event) => {\n    if (!props.shiftOnly || event instanceof KeyboardEvent || event.shiftKey) return true;\n    emit('refused');\n    return false;\n  },\n});\n","Task.vue",[513,1335,1336,1348,1366,1371,1399,1404,1424,1474,1487,1497,1503],{"__ignoreMap":550},[554,1337,1338,1340,1342,1344,1346],{"class":556,"line":557},[554,1339,147],{"class":857},[554,1341,860],{"class":564},[554,1343,924],{"class":581},[554,1345,584],{"class":564},[554,1347,1226],{"class":564},[554,1349,1350,1352,1354,1356,1358,1360,1362,1364],{"class":556,"line":854},[554,1351,1231],{"class":857},[554,1353,789],{"class":564},[554,1355,875],{"class":564},[554,1357,879],{"class":878},[554,1359,940],{"class":581},[554,1361,595],{"class":564},[554,1363,945],{"class":581},[554,1365,1247],{"class":564},[554,1367,1368],{"class":556,"line":904},[554,1369,1370],{"class":850},"  \u002F\u002F Never: the row is locked (and says so to screen readers with aria-disabled).\n",[554,1372,1373,1376,1378,1380,1382,1385,1388,1390,1392,1394,1397],{"class":556,"line":911},[554,1374,1375],{"class":857},"  disabled",[554,1377,789],{"class":564},[554,1379,875],{"class":564},[554,1381,879],{"class":878},[554,1383,1384],{"class":564}," !!",[554,1386,1387],{"class":581},"props",[554,1389,595],{"class":564},[554,1391,945],{"class":581},[554,1393,595],{"class":564},[554,1395,1396],{"class":581},"locked",[554,1398,1247],{"class":564},[554,1400,1401],{"class":556,"line":917},[554,1402,1403],{"class":850},"  \u002F\u002F Per press: pointer drags only with Shift held; the keyboard as usual.\n",[554,1405,1406,1409,1411,1414,1417,1420,1422],{"class":556,"line":1082},[554,1407,1408],{"class":857},"  canDrag",[554,1410,789],{"class":564},[554,1412,1413],{"class":564}," (",[554,1415,1416],{"class":568},"event",[554,1418,1419],{"class":564},")",[554,1421,879],{"class":878},[554,1423,1226],{"class":564},[554,1425,1426,1429,1432,1434,1436,1439,1442,1445,1448,1452,1455,1458,1460,1463,1465,1468,1471],{"class":556,"line":1114},[554,1427,1428],{"class":878},"    if",[554,1430,1431],{"class":564}," (!",[554,1433,1387],{"class":581},[554,1435,595],{"class":564},[554,1437,1438],{"class":581},"shiftOnly ",[554,1440,1441],{"class":564},"||",[554,1443,1444],{"class":581}," event ",[554,1446,1447],{"class":564},"instanceof",[554,1449,1451],{"class":1450},"sR6Ar"," KeyboardEvent",[554,1453,1454],{"class":564}," ||",[554,1456,1457],{"class":581}," event",[554,1459,595],{"class":564},[554,1461,1462],{"class":581},"shiftKey",[554,1464,1419],{"class":564},[554,1466,1467],{"class":878}," return",[554,1469,1470],{"class":800}," true",[554,1472,1473],{"class":564},";\n",[554,1475,1476,1479,1481,1484],{"class":556,"line":1162},[554,1477,1478],{"class":857},"    emit",[554,1480,860],{"class":564},[554,1482,1483],{"class":574},"'refused'",[554,1485,1486],{"class":564},");\n",[554,1488,1489,1492,1495],{"class":556,"line":1168},[554,1490,1491],{"class":878},"    return",[554,1493,1494],{"class":800}," false",[554,1496,1473],{"class":564},[554,1498,1500],{"class":556,"line":1499},10,[554,1501,1502],{"class":564},"  },\n",[554,1504,1506],{"class":556,"line":1505},11,[554,1507,901],{"class":564},[490,1509,1510,1523],{},[493,1511,1512],{},[496,1513,1514,1517,1520],{},[499,1515,1516],{},"选项",[499,1518,1519],{},"询问时机",[499,1521,1522],{},"用途",[505,1524,1525,1541,1553],{},[496,1526,1527,1532,1538],{},[510,1528,1529],{},[513,1530,1531],{},"disabled",[510,1533,1534,1535],{},"实时，并设置为 ",[513,1536,1537],{},"aria-disabled",[510,1539,1540],{},"完全不能移动的项：被锁定的、只读的。",[496,1542,1543,1547,1550],{},[510,1544,1545],{},[513,1546,1311],{},[510,1548,1549],{},"每次按下询问一次，带上它的事件",[510,1551,1552],{},"关于输入的规则：按住某个键、某个按钮、某种指针类型。",[496,1554,1555,1559,1562],{},[510,1556,1557],{},[513,1558,726],{},[510,1560,1561],{},"按下的位置",[510,1563,1564],{},"只能从某一部分开始拖拽的项。",[481,1566,1567,1569,1570,1316,1573,1576],{},[513,1568,1311],{}," 在激活约束之前、随 ",[513,1571,1572],{},"pointerdown",[513,1574,1575],{},"keydown"," 被询问。指针类型是它可以制定的又一条规则：",[545,1578,1580],{"className":841,"code":1579,"language":843,"meta":550,"style":550},"\u002F\u002F Mouse and pen drag; a touch on the row always scrolls the page.\ncanDrag: (event) => !(event instanceof PointerEvent && event.pointerType === 'touch'),\n",[513,1581,1582,1587],{"__ignoreMap":550},[554,1583,1584],{"class":556,"line":557},[554,1585,1586],{"class":850},"\u002F\u002F Mouse and pen drag; a touch on the row always scrolls the page.\n",[554,1588,1589,1591,1593,1595,1597,1599,1601,1604,1607,1609,1612,1615,1617,1619,1622,1625,1628],{"class":556,"line":854},[554,1590,1311],{"class":581},[554,1592,789],{"class":564},[554,1594,1413],{"class":564},[554,1596,1416],{"class":568},[554,1598,1419],{"class":564},[554,1600,879],{"class":878},[554,1602,1603],{"class":564}," !(",[554,1605,1606],{"class":581},"event ",[554,1608,1447],{"class":564},[554,1610,1611],{"class":1450}," PointerEvent",[554,1613,1614],{"class":564}," &&",[554,1616,1457],{"class":581},[554,1618,595],{"class":564},[554,1620,1621],{"class":581},"pointerType ",[554,1623,1624],{"class":564},"===",[554,1626,1627],{"class":574}," 'touch'",[554,1629,1630],{"class":564},"),\n",[481,1632,1633,1634,1636],{},"可交互的子元素——按钮、输入框、复选框、可编辑字段——永远不会开始指针拖拽，所以它们在可拖拽元素内部照常工作，就像演示中的复选框和负责人菜单那样。有 ",[513,1635,726],{}," 时，只有手柄能开始拖拽。",[485,1638,988],{"id":1639},"a-sensor-of-your-own",[481,1641,1642,1643,1646,1647,1649,1650,1653],{},"游戏手柄、屏幕摇杆、语音命令：任何能指向一个项并移动的东西都可以驱动拖拽。这个游戏手柄就是一个传感器。在一个英雄上方按住 ",[529,1644],{"value":1645},"A"," 拿起它，用方向键操控，再按 ",[529,1648],{"value":1645}," 放下，按 ",[529,1651],{"value":1652},"B"," 取消。鼠标和键盘在它旁边仍然可用：",[638,1655],{"height":1656,"hint":1657,"name":1658},"30rem","在一个英雄上方按住 A，然后按住一个方向：英雄在列表中移动","joystick",[481,1660,1661,1664,1665,1004,1668,1670],{},[513,1662,1663],{},"defineSensor"," 给传感器一个名称和一个 ",[513,1666,1667],{},"setup",[513,1669,1667],{}," 接收 provider 一侧的接口，每个 provider 调用一次：",[545,1672,1675],{"className":841,"code":1673,"filename":1674,"language":843,"meta":550,"style":550},"const sensor = defineSensor({\n  name: 'joystick',\n  \u002F\u002F Once per provider, in the browser. The cleanup runs when the provider unmounts.\n  setup(ctx) {\n    context = ctx;\n    return () => {\n      context = null;\n      drag = null;\n    };\n  },\n});\n","joystick.ts",[513,1676,1677,1692,1704,1709,1723,1735,1745,1757,1768,1773,1777],{"__ignoreMap":550},[554,1678,1679,1681,1684,1686,1689],{"class":556,"line":557},[554,1680,1043],{"class":878},[554,1682,1683],{"class":581}," sensor ",[554,1685,571],{"class":564},[554,1687,1688],{"class":857}," defineSensor",[554,1690,1691],{"class":564},"({\n",[554,1693,1694,1697,1699,1702],{"class":556,"line":854},[554,1695,1696],{"class":568},"  name",[554,1698,789],{"class":564},[554,1700,1701],{"class":574}," 'joystick'",[554,1703,1247],{"class":564},[554,1705,1706],{"class":556,"line":904},[554,1707,1708],{"class":850},"  \u002F\u002F Once per provider, in the browser. The cleanup runs when the provider unmounts.\n",[554,1710,1711,1714,1716,1719,1721],{"class":556,"line":911},[554,1712,1713],{"class":857},"  setup",[554,1715,860],{"class":564},[554,1717,1718],{"class":568},"ctx",[554,1720,1419],{"class":564},[554,1722,1226],{"class":564},[554,1724,1725,1728,1730,1733],{"class":556,"line":917},[554,1726,1727],{"class":581},"    context ",[554,1729,571],{"class":564},[554,1731,1732],{"class":581}," ctx",[554,1734,1473],{"class":564},[554,1736,1737,1739,1741,1743],{"class":556,"line":1082},[554,1738,1491],{"class":878},[554,1740,875],{"class":564},[554,1742,879],{"class":878},[554,1744,1226],{"class":564},[554,1746,1747,1750,1752,1755],{"class":556,"line":1114},[554,1748,1749],{"class":581},"      context ",[554,1751,571],{"class":564},[554,1753,1754],{"class":800}," null",[554,1756,1473],{"class":564},[554,1758,1759,1762,1764,1766],{"class":556,"line":1162},[554,1760,1761],{"class":581},"      drag ",[554,1763,571],{"class":564},[554,1765,1754],{"class":800},[554,1767,1473],{"class":564},[554,1769,1770],{"class":556,"line":1168},[554,1771,1772],{"class":564},"    };\n",[554,1774,1775],{"class":556,"line":1499},[554,1776,1502],{"class":564},[554,1778,1779],{"class":556,"line":1505},[554,1780,901],{"class":564},[481,1782,1783,1784,1787],{},"按下时用 ",[513,1785,1786],{},"activate()"," 向 provider 请求一次拖拽。目标会像真正的按下一样被检查：它必须是此 provider 的可拖拽元素、没有被禁用，并且不是其中的按钮：",[545,1789,1791],{"className":841,"code":1790,"filename":1674,"language":843,"meta":550,"style":550},"\u002F** A goes down: drops a running drag, or starts a hold over what is under the cursor. *\u002F\nconst press = () => {\n  if (drag?.state === 'dragging') return void drag.drop();\n  const at = point();\n  const target = document.elementFromPoint(at.x, at.y);\n  if (!target || !context) return;\n  drag = context.activate({\n    target, \u002F\u002F checked like a real press: a draggable of this provider, not disabled\n    point: at,\n    type: 'pointer', \u002F\u002F follows points: lists sort under it, containers auto-scroll\n    activation: { delay: 300 }, \u002F\u002F `useDnD().activation.progress` runs meanwhile\n    onEnd: (ended) => {\n      if (drag === ended) drag = null;\n    },\n  }); \u002F\u002F null: nothing to drag there\n};\n",[513,1792,1793,1798,1813,1851,1866,1905,1928,1945,1955,1966,1981,2002,2021,2048,2054,2063],{"__ignoreMap":550},[554,1794,1795],{"class":556,"line":557},[554,1796,1797],{"class":850},"\u002F** A goes down: drops a running drag, or starts a hold over what is under the cursor. *\u002F\n",[554,1799,1800,1802,1805,1807,1809,1811],{"class":556,"line":854},[554,1801,1043],{"class":878},[554,1803,1804],{"class":857}," press",[554,1806,1059],{"class":564},[554,1808,875],{"class":564},[554,1810,879],{"class":878},[554,1812,1226],{"class":564},[554,1814,1815,1818,1820,1823,1826,1829,1831,1834,1836,1838,1841,1844,1846,1849],{"class":556,"line":904},[554,1816,1817],{"class":878},"  if",[554,1819,1413],{"class":564},[554,1821,1822],{"class":581},"drag",[554,1824,1825],{"class":564},"?.",[554,1827,1828],{"class":581},"state ",[554,1830,1624],{"class":564},[554,1832,1833],{"class":574}," 'dragging'",[554,1835,1419],{"class":564},[554,1837,1467],{"class":878},[554,1839,1840],{"class":564}," void",[554,1842,1843],{"class":857}," drag",[554,1845,595],{"class":564},[554,1847,1848],{"class":857},"drop",[554,1850,1065],{"class":564},[554,1852,1853,1856,1859,1861,1864],{"class":556,"line":911},[554,1854,1855],{"class":878},"  const",[554,1857,1858],{"class":581}," at ",[554,1860,571],{"class":564},[554,1862,1863],{"class":857}," point",[554,1865,1065],{"class":564},[554,1867,1868,1870,1873,1875,1878,1880,1883,1885,1888,1890,1893,1895,1898,1900,1903],{"class":556,"line":917},[554,1869,1855],{"class":878},[554,1871,1872],{"class":581}," target ",[554,1874,571],{"class":564},[554,1876,1877],{"class":857}," document",[554,1879,595],{"class":564},[554,1881,1882],{"class":857},"elementFromPoint",[554,1884,860],{"class":564},[554,1886,1887],{"class":581},"at",[554,1889,595],{"class":564},[554,1891,1892],{"class":581},"x",[554,1894,584],{"class":564},[554,1896,1897],{"class":581}," at",[554,1899,595],{"class":564},[554,1901,1902],{"class":581},"y",[554,1904,1486],{"class":564},[554,1906,1907,1909,1911,1914,1916,1919,1922,1924,1926],{"class":556,"line":1082},[554,1908,1817],{"class":878},[554,1910,1431],{"class":564},[554,1912,1913],{"class":581},"target ",[554,1915,1441],{"class":564},[554,1917,1918],{"class":564}," !",[554,1920,1921],{"class":581},"context",[554,1923,1419],{"class":564},[554,1925,1467],{"class":878},[554,1927,1473],{"class":564},[554,1929,1930,1933,1935,1938,1940,1943],{"class":556,"line":1114},[554,1931,1932],{"class":581},"  drag ",[554,1934,571],{"class":564},[554,1936,1937],{"class":857}," context",[554,1939,595],{"class":564},[554,1941,1942],{"class":857},"activate",[554,1944,1691],{"class":564},[554,1946,1947,1950,1952],{"class":556,"line":1162},[554,1948,1949],{"class":581},"    target",[554,1951,584],{"class":564},[554,1953,1954],{"class":850}," \u002F\u002F checked like a real press: a draggable of this provider, not disabled\n",[554,1956,1957,1960,1962,1964],{"class":556,"line":1168},[554,1958,1959],{"class":568},"    point",[554,1961,789],{"class":564},[554,1963,1897],{"class":581},[554,1965,1247],{"class":564},[554,1967,1968,1971,1973,1976,1978],{"class":556,"line":1499},[554,1969,1970],{"class":568},"    type",[554,1972,789],{"class":564},[554,1974,1975],{"class":574}," 'pointer'",[554,1977,584],{"class":564},[554,1979,1980],{"class":850}," \u002F\u002F follows points: lists sort under it, containers auto-scroll\n",[554,1982,1983,1986,1988,1990,1992,1994,1997,1999],{"class":556,"line":1505},[554,1984,1985],{"class":568},"    activation",[554,1987,789],{"class":564},[554,1989,792],{"class":564},[554,1991,814],{"class":568},[554,1993,789],{"class":564},[554,1995,1996],{"class":800}," 300",[554,1998,804],{"class":564},[554,2000,2001],{"class":850}," \u002F\u002F `useDnD().activation.progress` runs meanwhile\n",[554,2003,2005,2008,2010,2012,2015,2017,2019],{"class":556,"line":2004},12,[554,2006,2007],{"class":857},"    onEnd",[554,2009,789],{"class":564},[554,2011,1413],{"class":564},[554,2013,2014],{"class":568},"ended",[554,2016,1419],{"class":564},[554,2018,879],{"class":878},[554,2020,1226],{"class":564},[554,2022,2024,2027,2029,2032,2034,2037,2039,2042,2044,2046],{"class":556,"line":2023},13,[554,2025,2026],{"class":878},"      if",[554,2028,1413],{"class":564},[554,2030,2031],{"class":581},"drag ",[554,2033,1624],{"class":564},[554,2035,2036],{"class":581}," ended",[554,2038,1419],{"class":564},[554,2040,2041],{"class":581}," drag ",[554,2043,571],{"class":564},[554,2045,1754],{"class":800},[554,2047,1473],{"class":564},[554,2049,2051],{"class":556,"line":2050},14,[554,2052,2053],{"class":564},"    },\n",[554,2055,2057,2060],{"class":556,"line":2056},15,[554,2058,2059],{"class":564},"  });",[554,2061,2062],{"class":850}," \u002F\u002F null: nothing to drag there\n",[554,2064,2066],{"class":556,"line":2065},16,[554,2067,2068],{"class":564},"};\n",[481,2070,2071],{},"然后拖拽随方向键移动，A 或 B 结束它：",[545,2073,2075],{"className":841,"code":2074,"filename":1674,"language":843,"meta":550,"style":550},"const move = (dx: number, dy: number) => {\n  cursor.value = { x: cursor.value.x + dx, y: cursor.value.y + dy }; \u002F\u002F clamped in the demo\n  drag?.move(point()); \u002F\u002F pending: checks the tolerance; dragging: moves\n};\n\nconst release = () => {\n  if (drag?.state === 'pending') drag.cancel(); \u002F\u002F A let go before the hold is over\n};\n\nconst cancel = () => drag?.cancel();\n",[513,2076,2077,2111,2177,2198,2202,2206,2221,2253,2257,2261],{"__ignoreMap":550},[554,2078,2079,2081,2084,2086,2088,2091,2093,2096,2098,2101,2103,2105,2107,2109],{"class":556,"line":557},[554,2080,1043],{"class":878},[554,2082,2083],{"class":857}," move",[554,2085,1059],{"class":564},[554,2087,1413],{"class":564},[554,2089,2090],{"class":568},"dx",[554,2092,789],{"class":564},[554,2094,2095],{"class":1450}," number",[554,2097,584],{"class":564},[554,2099,2100],{"class":568}," dy",[554,2102,789],{"class":564},[554,2104,2095],{"class":1450},[554,2106,1419],{"class":564},[554,2108,879],{"class":878},[554,2110,1226],{"class":564},[554,2112,2113,2116,2118,2121,2123,2125,2128,2130,2133,2135,2137,2139,2142,2145,2148,2150,2153,2155,2157,2159,2161,2163,2166,2168,2171,2174],{"class":556,"line":854},[554,2114,2115],{"class":581},"  cursor",[554,2117,595],{"class":564},[554,2119,2120],{"class":581},"value ",[554,2122,571],{"class":564},[554,2124,792],{"class":564},[554,2126,2127],{"class":568}," x",[554,2129,789],{"class":564},[554,2131,2132],{"class":581}," cursor",[554,2134,595],{"class":564},[554,2136,892],{"class":581},[554,2138,595],{"class":564},[554,2140,2141],{"class":581},"x ",[554,2143,2144],{"class":564},"+",[554,2146,2147],{"class":581}," dx",[554,2149,584],{"class":564},[554,2151,2152],{"class":568}," y",[554,2154,789],{"class":564},[554,2156,2132],{"class":581},[554,2158,595],{"class":564},[554,2160,892],{"class":581},[554,2162,595],{"class":564},[554,2164,2165],{"class":581},"y ",[554,2167,2144],{"class":564},[554,2169,2170],{"class":581}," dy ",[554,2172,2173],{"class":564},"};",[554,2175,2176],{"class":850}," \u002F\u002F clamped in the demo\n",[554,2178,2179,2182,2184,2187,2189,2192,2195],{"class":556,"line":904},[554,2180,2181],{"class":857},"  drag",[554,2183,1825],{"class":564},[554,2185,2186],{"class":857},"move",[554,2188,860],{"class":564},[554,2190,2191],{"class":857},"point",[554,2193,2194],{"class":564},"());",[554,2196,2197],{"class":850}," \u002F\u002F pending: checks the tolerance; dragging: moves\n",[554,2199,2200],{"class":556,"line":911},[554,2201,2068],{"class":564},[554,2203,2204],{"class":556,"line":917},[554,2205,908],{"emptyLinePlaceholder":907},[554,2207,2208,2210,2213,2215,2217,2219],{"class":556,"line":1082},[554,2209,1043],{"class":878},[554,2211,2212],{"class":857}," release",[554,2214,1059],{"class":564},[554,2216,875],{"class":564},[554,2218,879],{"class":878},[554,2220,1226],{"class":564},[554,2222,2223,2225,2227,2229,2231,2233,2235,2238,2240,2242,2244,2247,2250],{"class":556,"line":1114},[554,2224,1817],{"class":878},[554,2226,1413],{"class":564},[554,2228,1822],{"class":581},[554,2230,1825],{"class":564},[554,2232,1828],{"class":581},[554,2234,1624],{"class":564},[554,2236,2237],{"class":574}," 'pending'",[554,2239,1419],{"class":564},[554,2241,1843],{"class":857},[554,2243,595],{"class":564},[554,2245,2246],{"class":857},"cancel",[554,2248,2249],{"class":564},"();",[554,2251,2252],{"class":850}," \u002F\u002F A let go before the hold is over\n",[554,2254,2255],{"class":556,"line":1162},[554,2256,2068],{"class":564},[554,2258,2259],{"class":556,"line":1168},[554,2260,908],{"emptyLinePlaceholder":907},[554,2262,2263,2265,2268,2270,2272,2274,2276,2278,2280],{"class":556,"line":1499},[554,2264,1043],{"class":878},[554,2266,2267],{"class":857}," cancel",[554,2269,1059],{"class":564},[554,2271,875],{"class":564},[554,2273,879],{"class":878},[554,2275,1843],{"class":857},[554,2277,1825],{"class":564},[554,2279,2246],{"class":857},[554,2281,1065],{"class":564},[481,2283,2284,2285,2287,2288,2291,2292,2295],{},"像演示那样把传感器加到 provider 的 ",[513,2286,542],{}," 中，或用 ",[513,2289,2290],{},"useSensor(joystick.sensor)"," 让它在某个组件存续期间运行。点使用视口坐标：演示把它的光标保存在舞台的坐标中，这样光标会随页面滚动，并在 ",[513,2293,2294],{},"point()"," 中进行转换。",[745,2297,2299],{"id":2298},"what-the-sensor-gets","传感器能拿到什么",[481,2301,2302,2305],{},[513,2303,2304],{},"setup(context)"," 接收 provider 一侧的接口：",[490,2307,2308,2318],{},[493,2309,2310],{},[496,2311,2312,2315],{},[499,2313,2314],{},"成员",[499,2316,2317],{},"是什么",[505,2319,2320,2335,2344,2356,2372],{},[496,2321,2322,2326],{},[510,2323,2324],{},[513,2325,1387],{},[510,2327,2328,2329,755,2331,2334],{},"provider 的 props（",[513,2330,776],{},[513,2332,2333],{},"keyboard","……）。在需要时读取：它们可能会变化。",[496,2336,2337,2341],{},[510,2338,2339],{},[513,2340,1184],{},[510,2342,2343],{},"provider 的拖拽状态，无论是哪个传感器在运行拖拽。",[496,2345,2346,2350],{},[510,2347,2348],{},[513,2349,1822],{},[510,2351,2352,2353,1189],{},"provider 当前的拖拽，等待中或进行中，无论由哪个传感器启动。没有时为 ",[513,2354,2355],{},"null",[496,2357,2358,2363],{},[510,2359,2360],{},[513,2361,2362],{},"activate(options)",[510,2364,2365,2366,2369,2370,1189],{},"请求一次拖拽。返回 ",[513,2367,2368],{},"SensorDrag","，不能开始拖拽时返回 ",[513,2371,2355],{},[496,2373,2374,2379],{},[510,2375,2376],{},[513,2377,2378],{},"cancel()",[510,2380,2381],{},"取消 provider 的拖拽或等待中的按下。",[481,2383,2384,2386],{},[513,2385,1786],{}," 接受：",[490,2388,2389,2398],{},[493,2390,2391],{},[496,2392,2393,2395],{},[499,2394,1516],{},[499,2396,2397],{},"含义",[505,2399,2400,2410,2419,2436,2453,2472,2482,2492],{},[496,2401,2402,2407],{},[510,2403,2404],{},[513,2405,2406],{},"target",[510,2408,2409],{},"输入落在哪里：可拖拽元素内部的一个元素，或一个可拖拽元素的 id。元素会像真正的按下一样被检查（手柄、不是可交互的子元素）；id 会跳过这些检查。",[496,2411,2412,2416],{},[510,2413,2414],{},[513,2415,2191],{},[510,2417,2418],{},"拖拽开始的位置，使用视口坐标。默认：可拖拽元素的中心。",[496,2420,2421,2426],{},[510,2422,2423],{},[513,2424,2425],{},"type",[510,2427,2428,2431,2432,2435],{},[513,2429,2430],{},"'pointer'","（默认）：跟随点、对目标做命中测试、自动滚动。",[513,2433,2434],{},"'keyboard'","：按项移动、把目标滚动到可见范围、结束时归还焦点。",[496,2437,2438,2442],{},[510,2439,2440],{},[513,2441,776],{},[510,2443,2444,2445,2448,2449,2452],{},"一个约束（",[513,2446,2447],{},"{ delay: 300 }","），或一种指针类型（",[513,2450,2451],{},"'touch'","），以使用为其配置的约束。默认：无，拖拽立即开始。",[496,2454,2455,2459],{},[510,2456,2457],{},[513,2458,1416],{},[510,2460,2461,2462,2464,2465,2467,2468,2471],{},"输入事件，会交给项的 ",[513,2463,1311],{},"（没有它时不会询问 ",[513,2466,1311],{},"）。触摸的 ",[513,2469,2470],{},"pointerType"," 会让它成为触摸拖拽（触感反馈）。",[496,2473,2474,2479],{},[510,2475,2476],{},[513,2477,2478],{},"onStart(drag)",[510,2480,2481],{},"拖拽在激活之后开始了。",[496,2483,2484,2489],{},[510,2485,2486],{},[513,2487,2488],{},"onEnd(drag)",[510,2490,2491],{},"拖拽结束了：被中止、放下或取消——无论由谁触发。",[496,2493,2494,2499],{},[510,2495,2496],{},[513,2497,2498],{},"onResume(drag)",[510,2500,2501,2504,2505,2508,2509,755,2511,532,2513,2515],{},[513,2502,2503],{},"onBeforeDrop"," 返回了 ",[513,2506,2507],{},"'continue'","：拖拽继续，",[513,2510,2186],{},[513,2512,1848],{},[513,2514,2246],{}," 再次生效。",[481,2517,2518,2519,2521],{},"它返回的 ",[513,2520,2368],{},"：",[490,2523,2524,2533],{},[493,2525,2526],{},[496,2527,2528,2530],{},[499,2529,2314],{},[499,2531,2532],{},"作用",[505,2534,2535,2551,2571,2581,2591,2604,2616,2628],{},[496,2536,2537,2544],{},[510,2538,2539,755,2542],{},[513,2540,2541],{},"id",[513,2543,2425],{},[510,2545,2546,2547,1316,2549,1189],{},"被拖拽项的 id，以及 ",[513,2548,2430],{},[513,2550,2434],{},[496,2552,2553,2558],{},[510,2554,2555],{},[513,2556,2557],{},"state",[510,2559,2560,2563,2564,2567,2568,1189],{},[513,2561,2562],{},"'pending'","（等待激活）、",[513,2565,2566],{},"'dragging'","，然后是 ",[513,2569,2570],{},"'ended'",[496,2572,2573,2578],{},[510,2574,2575],{},[513,2576,2577],{},"started",[510,2579,2580],{},"拖拽已经开始，即使之后已经结束。",[496,2582,2583,2588],{},[510,2584,2585],{},[513,2586,2587],{},"move(point)",[510,2589,2590],{},"输入移动了。等待期间检查 tolerance；拖拽期间移动拖拽。",[496,2592,2593,2598],{},[510,2594,2595],{},[513,2596,2597],{},"step(direction)",[510,2599,2600,2601,1189],{},"键盘拖拽：按一次方向键的步进，",[513,2602,2603],{},"'up' | 'down' | 'left' | 'right'",[496,2605,2606,2611],{},[510,2607,2608],{},[513,2609,2610],{},"place({ list, index })",[510,2612,2613,2614,1189],{},"把项放到可排序列表的某个位置，与键盘移动一样。没有列表在那里接收它时，结果为 ",[513,2615,1319],{},[496,2617,2618,2623],{},[510,2619,2620],{},[513,2621,2622],{},"drop()",[510,2624,2625,2626,1189],{},"放下。放置完成并落位后，结果为 ",[513,2627,1315],{},[496,2629,2630,2634],{},[510,2631,2632],{},[513,2633,2378],{},[510,2635,2636],{},"取消：项飞回原处，或放弃等待中的按下。",[481,2638,2639,2640,2642,2643,1189],{},"已不再适用的调用——结束之后的移动、第二次 ",[513,2641,2622],{},"——会被忽略。完整类型：",[626,2644,423],{"href":190},[2646,2647,2648],"tip",{},[481,2649,2650,2651,2653,2654,2657,2658,755,2660,755,2662,2664],{},"要包装一个内置传感器，用你自己的上下文运行它的 ",[513,2652,1667],{},"。用 ",[513,2655,2656],{},"Object.create(context, { activate: { value: myActivate } })"," 创建这个上下文，而不是用展开运算符，这样实时的 getter（",[513,2659,1184],{},[513,2661,1822],{},[513,2663,1387],{},"）才能继续工作。",[485,2666,2668],{"id":2667},"programmatic-drags","程序化拖拽",[481,2670,2671,2674,2675,755,2677,755,2680,532,2683,2686,2687,532,2690,629],{},[513,2672,2673],{},"@vue-dnd-kit\u002Factions"," 通过代码移动项：“上移”按钮、菜单、键盘快捷键、撤销、新手引导、测试。它基于公开的传感器 API 构建，它的拖拽是真正的拖拽：会被播报、带有动画，经过 ",[513,2676,2503],{},[513,2678,2679],{},"onDrop",[513,2681,2682],{},"e.result",[513,2684,2685],{},"preventDefault()","，并遵循 provider 的规则（一次一个拖拽、禁用的项、",[513,2688,2689],{},"accept",[513,2691,2692],{},"group.put",[638,2694],{"height":2695,"hint":2696,"name":2697},"31.5rem","悬停在一首曲目上显示箭头，打乱顺序，或播放脚本化的拖拽","actions",[545,2699,2703],{"className":2700,"code":2701,"language":2702,"meta":550,"style":550},"language-bash shiki shiki-themes dnd-light dnd-light dnd-dark","npm i @vue-dnd-kit\u002Factions\n","bash",[513,2704,2705],{"__ignoreMap":550},[554,2706,2707,2710,2713],{"class":556,"line":557},[554,2708,2709],{"class":857},"npm",[554,2711,2712],{"class":574}," i",[554,2714,2715],{"class":574}," @vue-dnd-kit\u002Factions\n",[745,2717,2719],{"id":2718},"moveitem-one-call-one-move","moveItem：一次调用，一次移动",[545,2721,2723],{"className":841,"code":2722,"language":843,"meta":550,"style":550},"import { useDnDActions } from '@vue-dnd-kit\u002Factions';\n\nconst { moveItem } = useDnDActions(); \u002F\u002F in setup, under a provider\n\nawait moveItem('card-1', { index: 0 }); \u002F\u002F to the top of its list\nawait moveItem('card-1', { list: 'done' }); \u002F\u002F to the end of another list\nawait moveItem('card-1', { list: 'done', index: 2 }); \u002F\u002F to a place in another list\n",[513,2724,2725,2745,2749,2770,2774,2805,2832],{"__ignoreMap":550},[554,2726,2727,2730,2732,2735,2737,2740,2743],{"class":556,"line":557},[554,2728,2729],{"class":878},"import",[554,2731,792],{"class":564},[554,2733,2734],{"class":581}," useDnDActions ",[554,2736,1056],{"class":564},[554,2738,2739],{"class":878}," from",[554,2741,2742],{"class":574}," '@vue-dnd-kit\u002Factions'",[554,2744,1473],{"class":564},[554,2746,2747],{"class":556,"line":854},[554,2748,908],{"emptyLinePlaceholder":907},[554,2750,2751,2753,2755,2758,2760,2762,2765,2767],{"class":556,"line":904},[554,2752,1043],{"class":878},[554,2754,792],{"class":564},[554,2756,2757],{"class":581}," moveItem ",[554,2759,1056],{"class":564},[554,2761,1059],{"class":564},[554,2763,2764],{"class":857}," useDnDActions",[554,2766,2249],{"class":564},[554,2768,2769],{"class":850}," \u002F\u002F in setup, under a provider\n",[554,2771,2772],{"class":556,"line":911},[554,2773,908],{"emptyLinePlaceholder":907},[554,2775,2776,2779,2782,2784,2787,2789,2791,2794,2796,2799,2802],{"class":556,"line":917},[554,2777,2778],{"class":878},"await",[554,2780,2781],{"class":857}," moveItem",[554,2783,860],{"class":564},[554,2785,2786],{"class":574},"'card-1'",[554,2788,584],{"class":564},[554,2790,792],{"class":564},[554,2792,2793],{"class":568}," index",[554,2795,789],{"class":564},[554,2797,2798],{"class":800}," 0",[554,2800,2801],{"class":564}," });",[554,2803,2804],{"class":850}," \u002F\u002F to the top of its list\n",[554,2806,2807,2809,2811,2813,2815,2817,2819,2822,2824,2827,2829],{"class":556,"line":1082},[554,2808,2778],{"class":878},[554,2810,2781],{"class":857},[554,2812,860],{"class":564},[554,2814,2786],{"class":574},[554,2816,584],{"class":564},[554,2818,792],{"class":564},[554,2820,2821],{"class":568}," list",[554,2823,789],{"class":564},[554,2825,2826],{"class":574}," 'done'",[554,2828,2801],{"class":564},[554,2830,2831],{"class":850}," \u002F\u002F to the end of another list\n",[554,2833,2834,2836,2838,2840,2842,2844,2846,2848,2850,2852,2854,2856,2858,2861,2863],{"class":556,"line":1114},[554,2835,2778],{"class":878},[554,2837,2781],{"class":857},[554,2839,860],{"class":564},[554,2841,2786],{"class":574},[554,2843,584],{"class":564},[554,2845,792],{"class":564},[554,2847,2821],{"class":568},[554,2849,789],{"class":564},[554,2851,2826],{"class":574},[554,2853,584],{"class":564},[554,2855,2793],{"class":568},[554,2857,789],{"class":564},[554,2859,2860],{"class":800}," 2",[554,2862,2801],{"class":564},[554,2864,2865],{"class":850}," \u002F\u002F to a place in another list\n",[2867,2868,2869,2879,2885,2893,2896,2899],"ul",{},[2870,2871,2872,2875,2876,2878],"li",{},[513,2873,2874],{},"list"," 是可排序列表的 ",[513,2877,2541],{},"。不传时，项留在它所在的列表中。",[2870,2880,2881,2884],{},[513,2882,2883],{},"index"," 是项最终所在的位置，不把项本身计算在内，并被限制在列表范围内。不传时，项移到末尾。",[2870,2886,2887,2888,2890,2891,1189],{},"放置完成时结果为 ",[513,2889,1315],{},"；项没有被渲染或被禁用、没有列表在那里接收它，或放置被拒绝时为 ",[513,2892,1319],{},[2870,2894,2895],{},"调用会排队：每次调用都会等到 provider 空闲，所以快速的第二次点击不会丢失。演示中的打乱就是连续五次调用。",[2870,2897,2898],{},"它以键盘拖拽的方式运行，所以会被播报，焦点也保持在项上。",[2870,2900,2901],{},"仅限列表：树中的位置还有深度。",[481,2903,2904,2905,1189],{},"带移动按钮的行见",[626,2906,352],{"href":2907},"\u002Fdocs\u002Fguides\u002Faccessibility#moving-without-dragging",[745,2909,2911],{"id":2910},"startdrag-a-scripted-drag","startDrag：脚本化的拖拽",[545,2913,2915],{"className":841,"code":2914,"language":843,"meta":550,"style":550},"const { startDrag } = useDnDActions();\n\nconst drag = startDrag('card-1'); \u002F\u002F null when it can't start now\nif (drag) {\n  await drag.moveTo(document.querySelector('#trash')!); \u002F\u002F onto an element\n  await drag.moveTo({ x: 400, y: 120 }); \u002F\u002F to a point, in viewport coordinates\n  await drag.moveTo({ list: 'done', index: 2 }); \u002F\u002F to a list position\n  await drag.drop(); \u002F\u002F true when the drop went through; or drag.cancel()\n}\n",[513,2916,2917,2934,2938,2959,2972,3005,3038,3069,3084],{"__ignoreMap":550},[554,2918,2919,2921,2923,2926,2928,2930,2932],{"class":556,"line":557},[554,2920,1043],{"class":878},[554,2922,792],{"class":564},[554,2924,2925],{"class":581}," startDrag ",[554,2927,1056],{"class":564},[554,2929,1059],{"class":564},[554,2931,2764],{"class":857},[554,2933,1065],{"class":564},[554,2935,2936],{"class":556,"line":854},[554,2937,908],{"emptyLinePlaceholder":907},[554,2939,2940,2942,2944,2946,2949,2951,2953,2956],{"class":556,"line":904},[554,2941,1043],{"class":878},[554,2943,2041],{"class":581},[554,2945,571],{"class":564},[554,2947,2948],{"class":857}," startDrag",[554,2950,860],{"class":564},[554,2952,2786],{"class":574},[554,2954,2955],{"class":564},");",[554,2957,2958],{"class":850}," \u002F\u002F null when it can't start now\n",[554,2960,2961,2964,2966,2968,2970],{"class":556,"line":911},[554,2962,2963],{"class":878},"if",[554,2965,1413],{"class":564},[554,2967,1822],{"class":581},[554,2969,1419],{"class":564},[554,2971,1226],{"class":564},[554,2973,2974,2977,2979,2981,2984,2986,2989,2991,2994,2996,2999,3002],{"class":556,"line":917},[554,2975,2976],{"class":878},"  await",[554,2978,1843],{"class":857},[554,2980,595],{"class":564},[554,2982,2983],{"class":857},"moveTo",[554,2985,860],{"class":564},[554,2987,2988],{"class":857},"document",[554,2990,595],{"class":564},[554,2992,2993],{"class":857},"querySelector",[554,2995,860],{"class":564},[554,2997,2998],{"class":574},"'#trash'",[554,3000,3001],{"class":564},")!);",[554,3003,3004],{"class":850}," \u002F\u002F onto an element\n",[554,3006,3007,3009,3011,3013,3015,3018,3020,3022,3024,3026,3028,3030,3033,3035],{"class":556,"line":1082},[554,3008,2976],{"class":878},[554,3010,1843],{"class":857},[554,3012,595],{"class":564},[554,3014,2983],{"class":857},[554,3016,3017],{"class":564},"({",[554,3019,2127],{"class":568},[554,3021,789],{"class":564},[554,3023,966],{"class":800},[554,3025,584],{"class":564},[554,3027,2152],{"class":568},[554,3029,789],{"class":564},[554,3031,3032],{"class":800}," 120",[554,3034,2801],{"class":564},[554,3036,3037],{"class":850}," \u002F\u002F to a point, in viewport coordinates\n",[554,3039,3040,3042,3044,3046,3048,3050,3052,3054,3056,3058,3060,3062,3064,3066],{"class":556,"line":1114},[554,3041,2976],{"class":878},[554,3043,1843],{"class":857},[554,3045,595],{"class":564},[554,3047,2983],{"class":857},[554,3049,3017],{"class":564},[554,3051,2821],{"class":568},[554,3053,789],{"class":564},[554,3055,2826],{"class":574},[554,3057,584],{"class":564},[554,3059,2793],{"class":568},[554,3061,789],{"class":564},[554,3063,2860],{"class":800},[554,3065,2801],{"class":564},[554,3067,3068],{"class":850}," \u002F\u002F to a list position\n",[554,3070,3071,3073,3075,3077,3079,3081],{"class":556,"line":1162},[554,3072,2976],{"class":878},[554,3074,1843],{"class":857},[554,3076,595],{"class":564},[554,3078,1848],{"class":857},[554,3080,2249],{"class":564},[554,3082,3083],{"class":850}," \u002F\u002F true when the drop went through; or drag.cancel()\n",[554,3085,3086],{"class":556,"line":1168},[554,3087,3088],{"class":564},"}\n",[481,3090,3091,3093,3094,3096,3097,3099,3100,3103],{},[513,3092,2983],{}," 在移动渲染完成后完成，",[513,3095,1848],{}," 在放置落位后完成。演示中的“Play a scripted drag”用一小步一小步的 ",[513,3098,2983],{}," 把最后一首曲目滑上去，然后把它放在最顶部。",[513,3101,3102],{},"startDrag(id, { from: { x, y } })"," 会从某个点而不是项的中心拿起它。",[745,3105,3107],{"id":3106},"hand-a-drag-to-the-keyboard","把拖拽交给键盘",[481,3109,3110,3113,3114,3117],{},[513,3111,3112],{},"startDrag(id, { type: 'keyboard' })"," 以键盘拖拽的方式拿起项。你的代码可以用 ",[513,3115,3116],{},"await drag.step('down')"," 移动它，也可以把它交给用户：键盘传感器驱动每一个键盘拖拽，无论是谁启动的。这样就能做出一个“移动”菜单项：",[638,3119],{"height":3120,"hint":3121,"name":3122},"26rem","打开一行的菜单：使用方向键，或把它移到另一周","move-menu",[545,3124,3127],{"className":841,"code":3125,"filename":3126,"language":843,"meta":550,"style":550},"const { moveItem, startDrag } = useDnDActions();\n\n\u002F\u002F One move in one call: picked up, put there and dropped, announced and animated.\nconst toOther = () => moveItem(props.task.id, { list: props.other.id, index: 0 });\n\u002F\u002F A keyboard drag, handed to the arrow keys: Space or Enter drops, Escape cancels.\nconst withKeys = () => {\n  el.value?.focus();\n  startDrag(props.task.id, { type: 'keyboard' });\n};\n","Row.vue",[513,3128,3129,3149,3153,3158,3214,3219,3234,3250,3281],{"__ignoreMap":550},[554,3130,3131,3133,3135,3137,3139,3141,3143,3145,3147],{"class":556,"line":557},[554,3132,1043],{"class":878},[554,3134,792],{"class":564},[554,3136,2781],{"class":581},[554,3138,584],{"class":564},[554,3140,2925],{"class":581},[554,3142,1056],{"class":564},[554,3144,1059],{"class":564},[554,3146,2764],{"class":857},[554,3148,1065],{"class":564},[554,3150,3151],{"class":556,"line":854},[554,3152,908],{"emptyLinePlaceholder":907},[554,3154,3155],{"class":556,"line":904},[554,3156,3157],{"class":850},"\u002F\u002F One move in one call: picked up, put there and dropped, announced and animated.\n",[554,3159,3160,3162,3165,3167,3169,3171,3173,3175,3177,3179,3181,3183,3185,3187,3189,3191,3193,3195,3197,3200,3202,3204,3206,3208,3210,3212],{"class":556,"line":911},[554,3161,1043],{"class":878},[554,3163,3164],{"class":857}," toOther",[554,3166,1059],{"class":564},[554,3168,875],{"class":564},[554,3170,879],{"class":878},[554,3172,2781],{"class":857},[554,3174,860],{"class":564},[554,3176,1387],{"class":581},[554,3178,595],{"class":564},[554,3180,945],{"class":581},[554,3182,595],{"class":564},[554,3184,2541],{"class":581},[554,3186,584],{"class":564},[554,3188,792],{"class":564},[554,3190,2821],{"class":568},[554,3192,789],{"class":564},[554,3194,940],{"class":581},[554,3196,595],{"class":564},[554,3198,3199],{"class":581},"other",[554,3201,595],{"class":564},[554,3203,2541],{"class":581},[554,3205,584],{"class":564},[554,3207,2793],{"class":568},[554,3209,789],{"class":564},[554,3211,2798],{"class":800},[554,3213,981],{"class":564},[554,3215,3216],{"class":556,"line":917},[554,3217,3218],{"class":850},"\u002F\u002F A keyboard drag, handed to the arrow keys: Space or Enter drops, Escape cancels.\n",[554,3220,3221,3223,3226,3228,3230,3232],{"class":556,"line":1082},[554,3222,1043],{"class":878},[554,3224,3225],{"class":857}," withKeys",[554,3227,1059],{"class":564},[554,3229,875],{"class":564},[554,3231,879],{"class":878},[554,3233,1226],{"class":564},[554,3235,3236,3239,3241,3243,3245,3248],{"class":556,"line":1114},[554,3237,3238],{"class":857},"  el",[554,3240,595],{"class":564},[554,3242,892],{"class":857},[554,3244,1825],{"class":564},[554,3246,3247],{"class":857},"focus",[554,3249,1065],{"class":564},[554,3251,3252,3255,3257,3259,3261,3263,3265,3267,3269,3271,3274,3276,3279],{"class":556,"line":1162},[554,3253,3254],{"class":857},"  startDrag",[554,3256,860],{"class":564},[554,3258,1387],{"class":581},[554,3260,595],{"class":564},[554,3262,945],{"class":581},[554,3264,595],{"class":564},[554,3266,2541],{"class":581},[554,3268,584],{"class":564},[554,3270,792],{"class":564},[554,3272,3273],{"class":568}," type",[554,3275,789],{"class":564},[554,3277,3278],{"class":574}," 'keyboard'",[554,3280,981],{"class":564},[554,3282,3283],{"class":556,"line":1168},[554,3284,2068],{"class":564},[481,3286,3287,3288,3291,3292,3295,3296,1000,3299,3301],{},"方向键按位置移动这一行，:kbd{value=\"ArrowLeft\"} 和 ",[529,3289],{"value":3290},"ArrowRight"," 把它移到另一周（这两个列表共享一个 ",[513,3293,3294],{},"group","）。拖拽结束时，焦点回到这一行。当 ",[513,3297,3298],{},"useDnD().active.value?.sensor",[513,3300,2434],{}," 时，看板下方的按键提示会高亮。",[745,3303,3305],{"id":3304},"outside-components","在组件之外",[481,3307,3308,3311,3312,3314],{},[513,3309,3310],{},"useDnDActions()"," 在上方的 provider 中运行一个名为 ",[513,3313,2697],{}," 的传感器。要从 store 或测试工具驱动 provider，或使用你自己的名称，在你自己运行的传感器中创建 actions：",[545,3316,3318],{"className":841,"code":3317,"language":843,"meta":550,"style":550},"import { defineSensor } from '@vue-dnd-kit\u002Fcore';\nimport { createDnDActions, type DnDActions } from '@vue-dnd-kit\u002Factions';\n\nexport let tour: DnDActions | undefined;\nexport const tourSensor = defineSensor({\n  name: 'tour',\n  setup: (context) => void (tour = createDnDActions(context)),\n});\n",[513,3319,3320,3338,3362,3366,3390,3406,3417,3449],{"__ignoreMap":550},[554,3321,3322,3324,3326,3329,3331,3333,3336],{"class":556,"line":557},[554,3323,2729],{"class":878},[554,3325,792],{"class":564},[554,3327,3328],{"class":581}," defineSensor ",[554,3330,1056],{"class":564},[554,3332,2739],{"class":878},[554,3334,3335],{"class":574}," '@vue-dnd-kit\u002Fcore'",[554,3337,1473],{"class":564},[554,3339,3340,3342,3344,3347,3349,3351,3354,3356,3358,3360],{"class":556,"line":854},[554,3341,2729],{"class":878},[554,3343,792],{"class":564},[554,3345,3346],{"class":581}," createDnDActions",[554,3348,584],{"class":564},[554,3350,3273],{"class":878},[554,3352,3353],{"class":581}," DnDActions ",[554,3355,1056],{"class":564},[554,3357,2739],{"class":878},[554,3359,2742],{"class":574},[554,3361,1473],{"class":564},[554,3363,3364],{"class":556,"line":904},[554,3365,908],{"emptyLinePlaceholder":907},[554,3367,3368,3371,3374,3377,3379,3382,3385,3388],{"class":556,"line":911},[554,3369,3370],{"class":878},"export",[554,3372,3373],{"class":878}," let",[554,3375,3376],{"class":581}," tour",[554,3378,789],{"class":564},[554,3380,3381],{"class":1450}," DnDActions",[554,3383,3384],{"class":564}," |",[554,3386,3387],{"class":1450}," undefined",[554,3389,1473],{"class":564},[554,3391,3392,3394,3397,3400,3402,3404],{"class":556,"line":917},[554,3393,3370],{"class":878},[554,3395,3396],{"class":878}," const",[554,3398,3399],{"class":581}," tourSensor ",[554,3401,571],{"class":564},[554,3403,1688],{"class":857},[554,3405,1691],{"class":564},[554,3407,3408,3410,3412,3415],{"class":556,"line":1082},[554,3409,1696],{"class":568},[554,3411,789],{"class":564},[554,3413,3414],{"class":574}," 'tour'",[554,3416,1247],{"class":564},[554,3418,3419,3421,3423,3425,3427,3429,3431,3433,3435,3438,3440,3442,3444,3446],{"class":556,"line":1114},[554,3420,1713],{"class":857},[554,3422,789],{"class":564},[554,3424,1413],{"class":564},[554,3426,1921],{"class":568},[554,3428,1419],{"class":564},[554,3430,879],{"class":878},[554,3432,1840],{"class":564},[554,3434,1413],{"class":564},[554,3436,3437],{"class":581},"tour ",[554,3439,571],{"class":564},[554,3441,3346],{"class":857},[554,3443,860],{"class":564},[554,3445,1921],{"class":581},[554,3447,3448],{"class":564},")),\n",[554,3450,3451],{"class":556,"line":1162},[554,3452,901],{"class":564},[545,3454,3456],{"className":547,"code":3455,"language":549,"meta":550,"style":550},"\u003CDnDProvider :sensors=\"[pointerSensor, keyboardSensor, tourSensor]\">\n",[513,3457,3458],{"__ignoreMap":550},[554,3459,3460,3462,3464,3466,3468,3470,3472,3474,3476,3478,3480,3483,3485,3487],{"class":556,"line":557},[554,3461,561],{"class":560},[554,3463,565],{"class":564},[554,3465,542],{"class":568},[554,3467,571],{"class":564},[554,3469,575],{"class":574},[554,3471,578],{"class":564},[554,3473,515],{"class":581},[554,3475,584],{"class":564},[554,3477,587],{"class":581},[554,3479,584],{"class":564},[554,3481,3482],{"class":581}," tourSensor",[554,3484,601],{"class":564},[554,3486,575],{"class":574},[554,3488,606],{"class":560},[481,3490,3491,3492,3495,3496,3499,3500,1004,3502,3505,3506,1189],{},"然后就可以在任何地方调用 ",[513,3493,3494],{},"await tour?.moveItem('card-1', { list: 'done' })","。在服务端渲染期间不会发生任何拖拽：",[513,3497,3498],{},"moveItem"," 的结果为 ",[513,3501,1319],{},[513,3503,3504],{},"startDrag"," 返回 ",[513,3507,2355],{},[3509,3510,3511],"style",{},"html pre.shiki code .sf6mc, html code.shiki .sf6mc{--shiki-light:#CF2257;--shiki-default:#CF2257;--shiki-dark:#FF7B9C}html pre.shiki code .s6cML, html code.shiki .s6cML{--shiki-light:#5B5B63;--shiki-default:#5B5B63;--shiki-dark:#9F9FA9}html pre.shiki code .sVvmN, html code.shiki .sVvmN{--shiki-light:#7C4DCC;--shiki-default:#7C4DCC;--shiki-dark:#C3A6FF}html pre.shiki code .sN8r7, html code.shiki .sN8r7{--shiki-light:#9A6700;--shiki-default:#9A6700;--shiki-dark:#E9C46A}html pre.shiki code .snmWg, html code.shiki .snmWg{--shiki-light:#27272A;--shiki-default:#27272A;--shiki-dark:#E4E4E7}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s3IRZ, html code.shiki .s3IRZ{--shiki-light:#BC4C00;--shiki-default:#BC4C00;--shiki-dark:#F4A261}html pre.shiki code .sytrG, html code.shiki .sytrG{--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-default:#85858D;--shiki-default-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic}html pre.shiki code .sbwC8, html code.shiki .sbwC8{--shiki-light:#0969DA;--shiki-default:#0969DA;--shiki-dark:#7CC4FF}html pre.shiki code .s78Kj, html code.shiki .s78Kj{--shiki-light:#1F8A5B;--shiki-default:#1F8A5B;--shiki-dark:#42B883}html pre.shiki code .sR6Ar, html code.shiki .sR6Ar{--shiki-light:#0F766E;--shiki-default:#0F766E;--shiki-dark:#7EE0C0}",{"title":550,"searchDepth":904,"depth":904,"links":3513},[3514,3515,3520,3521,3524],{"id":487,"depth":854,"text":488},{"id":632,"depth":854,"text":633,"children":3516},[3517,3518,3519],{"id":747,"depth":904,"text":748},{"id":992,"depth":904,"text":993},{"id":1192,"depth":904,"text":1193},{"id":1305,"depth":854,"text":1306},{"id":1639,"depth":854,"text":988,"children":3522},[3523],{"id":2298,"depth":904,"text":2299},{"id":2667,"depth":854,"text":2668,"children":3525},[3526,3527,3528,3529],{"id":2718,"depth":904,"text":2719},{"id":2910,"depth":904,"text":2911},{"id":3106,"depth":904,"text":3107},{"id":3304,"depth":904,"text":3305},"输入如何变成拖拽——指针和键盘传感器、激活约束、canDrag、自定义传感器，以及用 @vue-dnd-kit\u002Factions 编写脚本驱动的拖拽。","md",null,{"source":3534},"c51feaa7f3",{"icon":111},{"title":364,"description":3530},"Q1YbsJRJqzmH02tirFShJBcTMiMK-dAkVnNCcFEVn-k",[3539,3541],{"title":360,"path":361,"stem":362,"description":3540,"icon":106},"为拖拽的每一种状态设置样式——用于纯 CSS 的 data 属性、用于 class 的 ref、表明接收与否的目标、拖拽期间的浮层和页面、默认样式、Tailwind 以及 UI 库。",{"title":113,"path":368,"stem":369,"description":3542,"icon":116},"Vue DevTools 和 Nuxt DevTools 中的 Vue DnD Kit 标签页——实时小地图、能真正拖拽的摇杆、实时编辑选项，以及每次拖拽的日志。",[3544,3548,3552,3555],{"name":3545,"lang":549,"code":3546,"html":3547},"index.vue","\u003Cscript setup lang=\"ts\">\nimport { DnDProvider } from '@vue-dnd-kit\u002Fcore';\nimport Inbox from '.\u002FInbox.vue';\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CDnDProvider>\n    \u003CInbox \u002F>\n  \u003C\u002FDnDProvider>\n\u003C\u002Ftemplate>","\u003Cpre class=\"shiki shiki-themes dnd-light dnd-dark\" style=\"--shiki-light:#27272a;--shiki-dark:#e4e4e7;--shiki-light-bg:#00000000;--shiki-dark-bg:#00000000\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><script\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> setup\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> lang\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"ts\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> DnDProvider \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '@vue-dnd-kit\u002Fcore'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Inbox \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '.\u002FInbox.vue'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fscript>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><template>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <DnDProvider>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <Inbox\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <\u002FDnDProvider>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Ftemplate>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"name":3549,"lang":843,"code":3550,"html":3551},"chats.ts","export interface Chat {\n  id: string;\n  name: string;\n  text: string;\n  time: string;\n  hue: number;\n}\n\nexport const CHATS: Chat[] = [\n  { id: 'mia', name: 'Mia', text: 'The deck is ready, have a look?', time: '9:41', hue: 168 },\n  { id: 'design', name: 'Design team', text: 'Leo: new icons are in Figma', time: '9:12', hue: 280 },\n  { id: 'noah', name: 'Noah', text: 'Lunch at one?', time: '8:55', hue: 24 },\n  { id: 'ops', name: 'On-call', text: 'All checks green again', time: 'Mon', hue: 200 },\n  { id: 'ava', name: 'Ava', text: 'Sent you the photos from Sunday', time: 'Sun', hue: 330 },\n];","\u003Cpre class=\"shiki shiki-themes dnd-light dnd-dark\" style=\"--shiki-light:#27272a;--shiki-dark:#e4e4e7;--shiki-light-bg:#00000000;--shiki-dark-bg:#00000000\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">export\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> interface\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Chat\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">  id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">  name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">  text\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">  time\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">  hue\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> number\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">export\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> CHATS\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Chat\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[]\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> [\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'mia'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Mia'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> text\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'The deck is ready, have a look?'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> time\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '9:41'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> hue\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 168\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'design'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Design team'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> text\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Leo: new icons are in Figma'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> time\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '9:12'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> hue\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 280\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'noah'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Noah'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> text\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Lunch at one?'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> time\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '8:55'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> hue\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 24\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'ops'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'On-call'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> text\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'All checks green again'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> time\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Mon'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> hue\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 200\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'ava'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Ava'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> text\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Sent you the photos from Sunday'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> time\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Sun'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> hue\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 330\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">];\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"name":1018,"lang":549,"code":3553,"html":3554},"\u003Cscript setup lang=\"ts\">\nimport { ref, shallowRef, useTemplateRef, watch } from 'vue';\nimport { useEventListener } from '@vueuse\u002Fcore';\nimport { makeDragArea, makeSortableList, useDnD, type ActivationOptions } from '@vue-dnd-kit\u002Fcore';\nimport Message from '.\u002FMessage.vue';\nimport { CHATS } from '.\u002Fchats';\n\nconst MODES: Record\u003Cstring, { activation?: ActivationOptions; code: string }> = {\n  hold: {\n    activation: { mouse: { delay: 400, tolerance: 8 }, touch: { delay: 400, tolerance: 8 } },\n    code: 'activation: { mouse: { delay: 400, tolerance: 8 }, touch: … }',\n  },\n  distance: { activation: { mouse: { distance: 24 }, pen: { distance: 24 } }, code: 'activation: { mouse: { distance: 24 }, pen: … }' },\n  handle: { code: \"handle: '.grip'  \u002F\u002F mouse: at once\" },\n};\nconst mode = ref('hold');\n\nconst chats = ref(CHATS);\nconst listRef = useTemplateRef\u003CHTMLElement>('list');\nconst { items } = makeSortableList(listRef, { items: chats });\n\n\u002F\u002F Rules for the drags that start inside the panel: here, when a press becomes a drag.\n\u002F\u002F An item's own `activation` would win over the area's, the provider's comes last.\nconst panel = useTemplateRef\u003CHTMLElement>('panel');\nmakeDragArea(panel, { activation: () => MODES[mode.value]!.activation });\n\n\u002F\u002F While a press waits, `status` is 'activating' and `progress` goes from 0 to 1.\nconst { status, activation } = useDnD();\n\n\u002F\u002F The ring is drawn where the press started; the note says why a press gave up.\nconst press = shallowRef({ x: 0, y: 0 });\nconst note = ref('');\nlet holding = false;\nconst onPress = (event: PointerEvent) => {\n  const box = panel.value!.getBoundingClientRect();\n  press.value = { x: event.clientX - box.left, y: event.clientY - box.top };\n  holding = true;\n  note.value = '';\n};\n\u002F\u002F Capture: before the sensor hears the release and the status changes.\nuseEventListener('pointerup', () => (holding = false), { capture: true });\n\u002F\u002F A press that gave up goes back to rest ('idle', or 'dropping' while an overlay lands).\nwatch(status, (now, before) => {\n  if (before !== 'activating' || now === 'dragging') return;\n  note.value = holding ? 'Moved more than 8 px while holding: no drag.' : 'Let go too early: just a click.';\n});\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"inbox\">\n    \u003Cdiv class=\"modes\" role=\"radiogroup\" aria-label=\"When a press becomes a drag\">\n      \u003Clabel v-for=\"(_, name) in MODES\" :key=\"name\" :class=\"{ on: mode === name }\">\n        \u003Cinput v-model=\"mode\" type=\"radio\" :value=\"name\" \u002F>\n        {{ name }}\n      \u003C\u002Flabel>\n    \u003C\u002Fdiv>\n    \u003Ccode class=\"code\">{{ MODES[mode]!.code }}\u003C\u002Fcode>\n\n    \u003Cdiv ref=\"panel\" class=\"panel\" @pointerdown.capture=\"onPress\">\n      \u003Cul ref=\"list\" class=\"list\">\n        \u003CMessage v-for=\"chat in items\" :key=\"chat.id\" :chat=\"chat\" :handle=\"mode === 'handle'\" \u002F>\n      \u003C\u002Ful>\n      \u003Csvg\n        v-if=\"status === 'activating'\"\n        class=\"press-ring\"\n        viewBox=\"0 0 40 40\"\n        :style=\"{ left: `${press.x}px`, top: `${press.y}px` }\"\n        aria-hidden=\"true\"\n      >\n        \u003Ccircle cx=\"20\" cy=\"20\" r=\"17\" class=\"track\" \u002F>\n        \u003Ccircle cx=\"20\" cy=\"20\" r=\"17\" class=\"fill\" pathLength=\"1\" :stroke-dasharray=\"`${activation.progress.value} 1`\" \u002F>\n      \u003C\u002Fsvg>\n    \u003C\u002Fdiv>\n\n    \u003Cp class=\"note\" :class=\"{ on: note }\">{{ note }}\u003C\u002Fp>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cstyle scoped>\n.inbox {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 10px;\n}\n\n.modes {\n  display: inline-flex;\n  padding: 3px;\n  border-radius: 10px;\n  background: color-mix(in srgb, currentColor 7%, transparent);\n}\n\n.modes label {\n  padding: 6px 14px;\n  border-radius: 7px;\n  font: 600 12px\u002F1.2 ui-monospace, Menlo, Consolas, monospace;\n  cursor: pointer;\n}\n\n.modes label.on {\n  background: Canvas;\n  box-shadow: 0 1px 3px rgb(0 0 0 \u002F 0.25);\n}\n\n.modes label:has(input:focus-visible) {\n  outline: 2px solid #42b883;\n}\n\n.modes input {\n  position: absolute;\n  opacity: 0;\n  pointer-events: none;\n}\n\n.code {\n  font: 11px\u002F1.4 ui-monospace, Menlo, Consolas, monospace;\n  text-align: center;\n  opacity: 0.6;\n}\n\n.panel {\n  position: relative;\n  width: min(380px, 100%);\n  padding: 6px;\n  box-sizing: border-box;\n  border: 1px solid color-mix(in srgb, currentColor 10%, transparent);\n  border-radius: 18px;\n  background: Canvas;\n}\n\n.list {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n\u002F* Centered on the press; never what a hit test finds. *\u002F\n.press-ring {\n  position: absolute;\n  width: 44px;\n  height: 44px;\n  margin: -22px 0 0 -22px;\n  rotate: -90deg;\n  pointer-events: none;\n}\n\n.press-ring circle {\n  fill: none;\n  stroke-width: 4;\n}\n\n.press-ring .track {\n  stroke: color-mix(in srgb, currentColor 15%, transparent);\n}\n\n.press-ring .fill {\n  stroke: #42b883;\n  stroke-linecap: round;\n}\n\n.note {\n  min-height: 1.4em;\n  margin: 0;\n  font: 12px\u002F1.4 ui-monospace, Menlo, Consolas, monospace;\n  opacity: 0;\n  transition: opacity 0.2s;\n}\n\n.note.on {\n  opacity: 0.7;\n}\n\u003C\u002Fstyle>","\u003Cpre class=\"shiki shiki-themes dnd-light dnd-dark\" style=\"--shiki-light:#27272a;--shiki-dark:#e4e4e7;--shiki-light-bg:#00000000;--shiki-dark-bg:#00000000\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><script\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> setup\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> lang\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"ts\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> ref\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> shallowRef\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> useTemplateRef\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> watch \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'vue'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> useEventListener \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '@vueuse\u002Fcore'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> makeDragArea\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> makeSortableList\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> useDnD\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> ActivationOptions \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '@vue-dnd-kit\u002Fcore'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Message \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '.\u002FMessage.vue'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> CHATS \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '.\u002Fchats'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> MODES\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Record\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> activation\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">?:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> ActivationOptions\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> code\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> }>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">  hold\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">    activation\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> mouse\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> delay\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 400\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> tolerance\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 8\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> },\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> touch\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> delay\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 400\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> tolerance\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 8\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> }\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">    code\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'activation: { mouse: { delay: 400, tolerance: 8 }, touch: … }'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">  distance\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> activation\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> mouse\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> distance\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 24\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> },\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> pen\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> distance\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 24\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> }\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> },\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> code\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'activation: { mouse: { distance: 24 }, pen: … }'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">  handle\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> code\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> \"handle: '.grip'  \u002F\u002F mouse: at once\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">};\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> mode \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> ref\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">'hold'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> chats \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> ref\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">CHATS\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> listRef \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> useTemplateRef\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">HTMLElement\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">>(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">'list'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> items \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> makeSortableList\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">listRef\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> items\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> chats \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">});\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F\u002F Rules for the drags that start inside the panel: here, when a press becomes a drag.\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F\u002F An item's own `activation` would win over the area's, the provider's comes last.\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> panel \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> useTemplateRef\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">HTMLElement\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">>(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">'panel'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">makeDragArea\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">panel\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> activation\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ()\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> MODES\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">mode\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">]!.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">activation \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">});\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F\u002F While a press waits, `status` is 'activating' and `progress` goes from 0 to 1.\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> status\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> activation \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> useDnD\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">();\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F\u002F The ring is drawn where the press started; the note says why a press gave up.\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> press \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> shallowRef\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">({\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> x\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> y\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> });\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> note \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> ref\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">''\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">let\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> holding \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> false\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> onPress\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> PointerEvent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> box \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> panel\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">!.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">getBoundingClientRect\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">();\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">  press\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> x\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">clientX \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">left\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> y\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">clientY \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">top \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">};\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">  holding \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> true\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">  note\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> ''\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">};\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F\u002F Capture: before the sensor hears the release and the status changes.\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">useEventListener\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">'pointerup'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ()\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">holding \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> false\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">),\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> capture\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> true\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> });\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F\u002F A press that gave up goes back to rest ('idle', or 'dropping' while an overlay lands).\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">watch\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">status\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">now\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> before\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">before \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">!==\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'activating'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ||\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> now \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">===\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'dragging'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">  note\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> holding \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">?\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Moved more than 8 px while holding: no drag.'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Let go too early: just a click.'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">});\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fscript>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><template>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <div\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"inbox\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <div\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"modes\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> role\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"radiogroup\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> aria-label\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"When a press becomes a drag\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">      <label\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> v-for\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"(_, name) in MODES\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> :key\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"name\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> :class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"{ on: mode === name }\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">        <input\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> v-model\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"mode\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"radio\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> :value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"name\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">        {{ name }}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">      <\u002Flabel>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <\u002Fdiv>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <code\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"code\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">{{ MODES[mode]!.code }}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fcode>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <div\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> ref\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"panel\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"panel\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> @pointerdown.capture\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"onPress\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">      <ul\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> ref\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"list\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"list\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">        <Message\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> v-for\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">chat \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> items\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">key\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">chat\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">chat\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">chat\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">handle\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">mode \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">===\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'handle'\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">      <\u002Ful>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">      <svg\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">        v-if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"status === 'activating'\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">        class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"press-ring\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">        viewBox\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"0 0 40 40\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">        :style\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"{ left: `${press.x}px`, top: `${press.y}px` }\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">        aria-hidden\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"true\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">      >\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">        <circle\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> cx\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"20\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> cy\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"20\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> r\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"17\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"track\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">        <circle\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> cx\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"20\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> cy\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"20\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> r\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"17\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"fill\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> pathLength\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"1\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> :stroke-dasharray\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"`${activation.progress.value} 1`\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">      <\u002Fsvg>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <\u002Fdiv>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <p\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"note\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> :class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"{ on: note }\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">{{ note }}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fp>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <\u002Fdiv>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Ftemplate>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><style\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> scoped\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">inbox\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  flex-direction\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> column\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  align-items\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> center\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  gap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 10\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">modes\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> inline-flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  padding\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 3\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 10\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> srgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> currentColor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 7\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> transparent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">modes\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> label\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  padding\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 6\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 14\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 7\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 600\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 12\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">1.2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> ui-monospace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Menlo\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Consolas\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> monospace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  cursor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> pointer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">modes\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> label\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">on\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Canvas\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  box-shadow\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 3\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> rgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> \u002F \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0.25\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">modes\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> label\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">has\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">input\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">focus-visible\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  outline\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> solid\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">42b883\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">modes\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> input\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  position\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> absolute\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  opacity\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  pointer-events\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">code\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 11\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">1.4\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> ui-monospace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Menlo\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Consolas\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> monospace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  text-align\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> center\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  opacity\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0.6\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">panel\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  position\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> relative\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> min\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">380\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 100\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  padding\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 6\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  box-sizing\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> border-box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> solid\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> srgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> currentColor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 10\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> transparent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 18\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Canvas\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">list\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  flex-direction\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> column\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  gap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  margin\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  padding\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  list-style\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F* Centered on the press; never what a hit test finds. *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">press-ring\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  position\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> absolute\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 44\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 44\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  margin\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> -22\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> -22\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  rotate\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> -90\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">deg\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  pointer-events\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">press-ring\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> circle\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  fill\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  stroke-width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 4\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">press-ring\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> .\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">track\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  stroke\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> srgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> currentColor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 15\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> transparent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">press-ring\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> .\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">fill\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  stroke\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">42b883\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  stroke-linecap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> round\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">note\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  min-height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1.4\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">em\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  margin\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 12\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">1.4\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> ui-monospace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Menlo\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Consolas\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> monospace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  opacity\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  transition\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> opacity \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0.2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">s\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">note\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">on\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  opacity\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0.7\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fstyle>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"name":1211,"lang":549,"code":3556,"html":3557},"\u003Cscript setup lang=\"ts\">\nimport { useTemplateRef } from 'vue';\nimport { makeSortableItem } from '@vue-dnd-kit\u002Fcore';\nimport type { Chat } from '.\u002Fchats';\n\nconst props = defineProps\u003C{ chat: Chat; handle: boolean }>();\nconst el = useTemplateRef\u003CHTMLElement>('el');\n\nmakeSortableItem(el, {\n  item: () => props.chat,\n  \u002F\u002F With a handle only the grip starts a drag: at once with a mouse (the default for\n  \u002F\u002F handles), after 4 px by touch, since the grip doesn't scroll the page.\n  handle: () => (props.handle ? '.grip' : undefined),\n  activation: () => (props.handle ? { touch: { distance: 4 } } : undefined),\n});\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cli ref=\"el\" class=\"chat\" :class=\"{ 'by-handle': handle }\">\n    \u003Cspan class=\"avatar\" :style=\"{ '--hue': chat.hue }\">{{ chat.name[0] }}\u003C\u002Fspan>\n    \u003Cspan class=\"text\">\n      \u003Cstrong>{{ chat.name }}\u003C\u002Fstrong>\n      \u003Csmall>{{ chat.text }}\u003C\u002Fsmall>\n    \u003C\u002Fspan>\n    \u003Ctime>{{ chat.time }}\u003C\u002Ftime>\n    \u003C!-- Only where it works: a button, so a keyboard drag starts from it too. -->\n    \u003Cbutton v-if=\"handle\" type=\"button\" class=\"grip\" :aria-label=\"`Move the chat with ${chat.name}`\">⠿\u003C\u002Fbutton>\n  \u003C\u002Fli>\n\u003C\u002Ftemplate>\n\n\u003Cstyle scoped>\n.chat {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 9px 10px 9px 12px;\n  border-radius: 12px;\n  background: Canvas;\n  cursor: grab;\n  user-select: none;\n}\n\n.chat.by-handle {\n  cursor: default;\n}\n\n.chat:focus-visible,\n.grip:focus-visible {\n  outline: 2px solid #42b883;\n  outline-offset: -2px;\n}\n\n.chat[data-dnd-placeholder] {\n  background: color-mix(in srgb, #42b883 9%, Canvas);\n}\n\n.chat[data-dnd-placeholder] > * {\n  visibility: hidden;\n}\n\n[data-dnd-overlay] .chat {\n  box-shadow:\n    0 0 0 1px color-mix(in srgb, currentColor 12%, transparent),\n    0 16px 28px -14px rgb(0 0 0 \u002F 0.5);\n}\n\n.avatar {\n  display: grid;\n  flex: none;\n  place-items: center;\n  width: 36px;\n  height: 36px;\n  border-radius: 50%;\n  background: linear-gradient(135deg, hsl(var(--hue) 70% 62%), hsl(calc(var(--hue) + 40) 65% 45%));\n  color: #fff;\n  font-size: 14px;\n  font-weight: 700;\n}\n\n.text {\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  gap: 2px;\n  min-width: 0;\n  font-size: 13px;\n}\n\n.text small {\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  opacity: 0.55;\n}\n\ntime {\n  font: 10px\u002F1 ui-monospace, Menlo, Consolas, monospace;\n  opacity: 0.45;\n}\n\n\u002F* The only place a drag starts: a touch on it never scrolls. *\u002F\n.grip {\n  display: grid;\n  place-items: center;\n  width: 26px;\n  height: 32px;\n  margin-right: -4px;\n  padding: 0;\n  border: 0;\n  border-radius: 7px;\n  background: color-mix(in srgb, #42b883 14%, transparent);\n  color: #42b883;\n  font-size: 16px;\n  cursor: grab;\n  touch-action: none;\n}\n\u003C\u002Fstyle>","\u003Cpre class=\"shiki shiki-themes dnd-light dnd-dark\" style=\"--shiki-light:#27272a;--shiki-dark:#e4e4e7;--shiki-light-bg:#00000000;--shiki-dark-bg:#00000000\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><script\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> setup\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> lang\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"ts\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> useTemplateRef \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'vue'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> makeSortableItem \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '@vue-dnd-kit\u002Fcore'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Chat \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '.\u002Fchats'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> props \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> defineProps\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><{\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> chat\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Chat\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> handle\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> boolean\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> }>();\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> el \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> useTemplateRef\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">HTMLElement\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">>(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">'el'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">makeSortableItem\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">el\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">  item\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ()\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> props\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">chat\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">  \u002F\u002F With a handle only the grip starts a drag: at once with a mouse (the default for\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">  \u002F\u002F handles), after 4 px by touch, since the grip doesn't scroll the page.\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">  handle\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ()\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">props\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">handle \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">?\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '.grip'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> undefined\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">),\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">  activation\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ()\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">props\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">handle \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">?\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> touch\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> distance\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 4\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> }\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> }\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> undefined\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">),\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">});\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fscript>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><template>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <li\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> ref\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"el\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"chat\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> :class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"{ 'by-handle': handle }\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <span\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"avatar\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> :style\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"{ '--hue': chat.hue }\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">{{ chat.name[0] }}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fspan>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <span\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"text\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">      <strong>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">{{ chat.name }}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fstrong>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">      <small>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">{{ chat.text }}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fsmall>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <\u002Fspan>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <time>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">{{ chat.time }}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Ftime>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">    <!-- Only where it works: a button, so a keyboard drag starts from it too. -->\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <button\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> v-if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"handle\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"button\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"grip\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> :aria-label\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"`Move the chat with ${chat.name}`\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">⠿\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fbutton>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <\u002Fli>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Ftemplate>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><style\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> scoped\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">chat\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  align-items\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> center\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  gap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 12\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  padding\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 9\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 10\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 9\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 12\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 12\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Canvas\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  cursor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> grab\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  user-select\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">chat\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">by-handle\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  cursor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> default\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">chat\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">focus-visible\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">grip\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">focus-visible\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  outline\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> solid\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">42b883\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  outline-offset\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> -2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">chat\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">data-dnd-placeholder\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">]\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> srgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">42b883 \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">9\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> Canvas\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">chat\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">data-dnd-placeholder\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">]\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> >\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> *\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  visibility\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> hidden\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">data-dnd-overlay\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">]\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> .\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">chat\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  box-shadow\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">    0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> srgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> currentColor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 12\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> transparent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">),\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">    0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 16\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 28\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> -14\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> rgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> \u002F \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0.5\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">avatar\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> grid\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  place-items\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> center\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 36\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 36\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 50\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> linear-gradient\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">135\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">deg\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> hsl\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">var\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">--hue\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 70\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 62\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">),\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> hsl\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">calc\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">var\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">--hue\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> +\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 40\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 65\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 45\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">));\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">fff\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font-size\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 14\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font-weight\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 700\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">text\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  flex-direction\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> column\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  gap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  min-width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font-size\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 13\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">text\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> small\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  overflow\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> hidden\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  white-space\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> nowrap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  text-overflow\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> ellipsis\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  opacity\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0.55\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">time\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 10\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> ui-monospace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Menlo\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Consolas\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> monospace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  opacity\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0.45\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F* The only place a drag starts: a touch on it never scrolls. *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">grip\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> grid\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  place-items\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> center\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 26\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 32\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  margin-right\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> -4\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  padding\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 7\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> srgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">42b883 \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">14\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> transparent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">42b883\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font-size\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 16\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  cursor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> grab\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  touch-action\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fstyle>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[3559,3562,3566],{"name":3545,"lang":549,"code":3560,"html":3561},"\u003Cscript setup lang=\"ts\">\nimport { DnDProvider } from '@vue-dnd-kit\u002Fcore';\nimport Checklist from '.\u002FChecklist.vue';\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CDnDProvider>\n    \u003CChecklist \u002F>\n  \u003C\u002FDnDProvider>\n\u003C\u002Ftemplate>","\u003Cpre class=\"shiki shiki-themes dnd-light dnd-dark\" style=\"--shiki-light:#27272a;--shiki-dark:#e4e4e7;--shiki-light-bg:#00000000;--shiki-dark-bg:#00000000\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><script\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> setup\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> lang\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"ts\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> DnDProvider \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '@vue-dnd-kit\u002Fcore'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Checklist \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '.\u002FChecklist.vue'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fscript>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><template>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <DnDProvider>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <Checklist\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <\u002FDnDProvider>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Ftemplate>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"name":3563,"lang":549,"code":3564,"html":3565},"Checklist.vue","\u003Cscript setup lang=\"ts\">\nimport { ref, useTemplateRef } from 'vue';\nimport { useKeyModifier, useTimeoutFn } from '@vueuse\u002Fcore';\nimport { makeSortableList } from '@vue-dnd-kit\u002Fcore';\nimport Task from '.\u002FTask.vue';\n\nconst tasks = ref([\n  { id: 1, title: 'Freeze the API', done: true, owner: 'Ana', locked: true },\n  { id: 2, title: 'Write the changelog', done: false, owner: 'Ben' },\n  { id: 3, title: 'Record the demo', done: false, owner: 'Kim' },\n  { id: 4, title: 'Tweet about it', done: false, owner: 'Ana' },\n]);\nconst listRef = useTemplateRef\u003CHTMLElement>('list');\nconst { items } = makeSortableList(listRef, { items: tasks });\n\nconst shiftOnly = ref(true);\nconst shift = useKeyModifier('Shift');\n\n\u002F\u002F Shakes the hint when `canDrag` turns a press down.\nconst nudged = ref(false);\nconst { start } = useTimeoutFn(() => (nudged.value = false), 400, { immediate: false });\nconst nudge = () => {\n  nudged.value = true;\n  start();\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"checklist\">\n    \u003Cheader>\n      \u003Cstrong>Launch checklist\u003C\u002Fstrong>\n      \u003Clabel class=\"switch\">\n        \u003Cinput v-model=\"shiftOnly\" type=\"checkbox\" \u002F>\n        \u003Cspan class=\"track\" \u002F>\n        Shift to drag\n      \u003C\u002Flabel>\n    \u003C\u002Fheader>\n    \u003Cul ref=\"list\" class=\"list\">\n      \u003CTask v-for=\"task in items\" :key=\"task.id\" :task=\"task\" :shift-only=\"shiftOnly\" @refused=\"nudge\" \u002F>\n    \u003C\u002Ful>\n    \u003Cp class=\"hint\" :class=\"{ nudged, off: !shiftOnly }\">\n      Hold \u003Ckbd :class=\"{ down: shift }\">⇧ Shift\u003C\u002Fkbd> and drag a row\n    \u003C\u002Fp>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cstyle scoped>\n.checklist {\n  width: min(380px, 100%);\n  margin: 0 auto;\n  padding: 14px;\n  box-sizing: border-box;\n  border: 1px solid color-mix(in srgb, currentColor 10%, transparent);\n  border-radius: 16px;\n  background: color-mix(in srgb, currentColor 3%, Canvas);\n}\n\nheader {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n  margin: 0 2px 12px;\n  font-size: 14px;\n}\n\n.switch {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font: 12px\u002F1 ui-monospace, Menlo, Consolas, monospace;\n  cursor: pointer;\n}\n\n.switch input {\n  position: absolute;\n  opacity: 0;\n}\n\n.track {\n  position: relative;\n  width: 30px;\n  height: 18px;\n  border-radius: 99px;\n  background: color-mix(in srgb, currentColor 18%, transparent);\n  transition: background 0.2s;\n}\n\n.track::after {\n  content: '';\n  position: absolute;\n  top: 2px;\n  left: 2px;\n  width: 14px;\n  height: 14px;\n  border-radius: 50%;\n  background: Canvas;\n  transition: translate 0.2s;\n}\n\n.switch input:checked + .track {\n  background: #42b883;\n}\n\n.switch input:checked + .track::after {\n  translate: 12px 0;\n}\n\n.switch input:focus-visible + .track {\n  outline: 2px solid #42b883;\n  outline-offset: 2px;\n}\n\n.list {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n.hint {\n  margin: 12px 0 0;\n  font-size: 12px;\n  text-align: center;\n  opacity: 0.7;\n  transition: opacity 0.2s;\n}\n\n.hint.off {\n  opacity: 0;\n}\n\n.hint.nudged {\n  animation: shake 0.4s;\n}\n\nkbd {\n  padding: 2px 6px;\n  border: 1px solid color-mix(in srgb, currentColor 25%, transparent);\n  border-bottom-width: 2px;\n  border-radius: 5px;\n  font: 11px\u002F1 ui-monospace, Menlo, Consolas, monospace;\n  transition:\n    background 0.1s,\n    color 0.1s;\n}\n\nkbd.down {\n  border-color: #42b883;\n  background: #42b883;\n  color: #fff;\n}\n\n@keyframes shake {\n  25% {\n    translate: -5px 0;\n  }\n  50% {\n    translate: 5px 0;\n  }\n  75% {\n    translate: -3px 0;\n  }\n}\n\u003C\u002Fstyle>","\u003Cpre class=\"shiki shiki-themes dnd-light dnd-dark\" style=\"--shiki-light:#27272a;--shiki-dark:#e4e4e7;--shiki-light-bg:#00000000;--shiki-dark-bg:#00000000\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><script\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> setup\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> lang\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"ts\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> ref\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> useTemplateRef \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'vue'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> useKeyModifier\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> useTimeoutFn \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '@vueuse\u002Fcore'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> makeSortableList \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '@vue-dnd-kit\u002Fcore'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Task \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '.\u002FTask.vue'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> tasks \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> ref\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">([\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> title\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Freeze the API'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> done\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> true\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> owner\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Ana'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> locked\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> true\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> title\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Write the changelog'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> done\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> false\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> owner\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Ben'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 3\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> title\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Record the demo'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> done\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> false\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> owner\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Kim'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 4\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> title\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Tweet about it'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> done\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> false\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> owner\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Ana'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">]);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> listRef \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> useTemplateRef\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">HTMLElement\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">>(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">'list'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> items \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> makeSortableList\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">listRef\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> items\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> tasks \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">});\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> shiftOnly \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> ref\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">true\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> shift \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> useKeyModifier\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">'Shift'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F\u002F Shakes the hint when `canDrag` turns a press down.\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> nudged \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> ref\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">false\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> start \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> useTimeoutFn\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(()\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">nudged\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> false\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">),\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 400\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> immediate\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> false\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> });\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> nudge\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ()\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">  nudged\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> true\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">  start\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">();\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">};\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fscript>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><template>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <div\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"checklist\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <header>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">      <strong>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">Launch checklist\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fstrong>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">      <label\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"switch\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">        <input\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> v-model\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"shiftOnly\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"checkbox\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">        <span\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"track\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> \u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">        Shift to drag\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">      <\u002Flabel>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <\u002Fheader>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <ul\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> ref\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"list\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"list\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">      <Task\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> v-for\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">task \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> items\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">key\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">task\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">task\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">task\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">shift-only\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">shiftOnly\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> @\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">refused\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">nudge\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <\u002Ful>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <p\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"hint\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> :class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"{ nudged, off: !shiftOnly }\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">      Hold \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><kbd\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> :class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"{ down: shift }\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">⇧ Shift\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fkbd>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> and drag a row\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <\u002Fp>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <\u002Fdiv>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Ftemplate>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><style\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> scoped\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">checklist\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> min\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">380\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 100\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  margin\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> auto\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  padding\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 14\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  box-sizing\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> border-box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> solid\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> srgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> currentColor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 10\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> transparent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 16\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> srgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> currentColor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 3\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> Canvas\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">header\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  align-items\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> center\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  justify-content\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> space-between\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  gap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 8\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  margin\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 12\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font-size\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 14\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">switch\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  align-items\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> center\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  gap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 8\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 12\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> ui-monospace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Menlo\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Consolas\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> monospace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  cursor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> pointer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">switch\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> input\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  position\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> absolute\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  opacity\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">track\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  position\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> relative\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 30\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 18\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 99\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> srgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> currentColor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 18\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> transparent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  transition\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> background \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0.2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">s\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">track\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">::\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">after\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  content\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> ''\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  position\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> absolute\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  top\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  left\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 14\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 14\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 50\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Canvas\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  transition\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> translate \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0.2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">s\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">switch\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> input\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">checked\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> +\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> .\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">track\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">42b883\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">switch\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> input\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">checked\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> +\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> .\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">track\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">::\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">after\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  translate\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 12\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">switch\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> input\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">focus-visible\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> +\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> .\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">track\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  outline\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> solid\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">42b883\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  outline-offset\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">list\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  flex-direction\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> column\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  gap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 6\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  margin\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  padding\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  list-style\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">hint\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  margin\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 12\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font-size\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 12\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  text-align\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> center\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  opacity\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0.7\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  transition\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> opacity \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0.2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">s\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">hint\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">off\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  opacity\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">hint\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">nudged\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  animation\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> shake \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0.4\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">s\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">kbd\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  padding\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 6\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> solid\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> srgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> currentColor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 25\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> transparent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-bottom-width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 5\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 11\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> ui-monospace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Menlo\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Consolas\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> monospace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  transition\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">    background \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0.1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">s\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">    color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0.1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">s\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">kbd\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">down\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">42b883\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">42b883\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">fff\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">@\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">keyframes\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> shake\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">  25% \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">{\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">    translate\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> -5\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">  50% \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">{\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">    translate\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 5\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">  75% \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">{\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">    translate\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> -3\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fstyle>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"name":1333,"lang":549,"code":3567,"html":3568},"\u003Cscript setup lang=\"ts\">\nimport { useTemplateRef } from 'vue';\nimport { makeSortableItem } from '@vue-dnd-kit\u002Fcore';\n\nconst props = defineProps\u003C{\n  task: { id: number; title: string; done: boolean; owner: string; locked?: boolean };\n  shiftOnly: boolean;\n}>();\nconst emit = defineEmits\u003C{ refused: [] }>();\nconst el = useTemplateRef\u003CHTMLElement>('el');\n\nmakeSortableItem(el, {\n  item: () => props.task,\n  \u002F\u002F Never: the row is locked (and says so to screen readers with aria-disabled).\n  disabled: () => !!props.task.locked,\n  \u002F\u002F Per press: pointer drags only with Shift held; the keyboard as usual.\n  canDrag: (event) => {\n    if (!props.shiftOnly || event instanceof KeyboardEvent || event.shiftKey) return true;\n    emit('refused');\n    return false;\n  },\n});\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cli ref=\"el\" class=\"task\" :class=\"{ done: task.done, locked: task.locked }\">\n    \u003C!-- Controls inside a draggable keep working: a press on them never starts a drag. -->\n    \u003Cinput v-model=\"task.done\" type=\"checkbox\" :aria-label=\"`Done: ${task.title}`\" \u002F>\n    \u003Cspan class=\"title\">{{ task.title }}\u003C\u002Fspan>\n    \u003Cspan v-if=\"task.locked\" class=\"lock\">locked\u003C\u002Fspan>\n    \u003Cselect v-else v-model=\"task.owner\" :aria-label=\"`Owner of ${task.title}`\">\n      \u003Coption v-for=\"owner in ['Ana', 'Ben', 'Kim']\" :key=\"owner\">{{ owner }}\u003C\u002Foption>\n    \u003C\u002Fselect>\n  \u003C\u002Fli>\n\u003C\u002Ftemplate>\n\n\u003Cstyle scoped>\n.task {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 8px 10px;\n  border-radius: 10px;\n  background: Canvas;\n  box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 9%, transparent);\n  cursor: grab;\n  user-select: none;\n}\n\n.task.locked {\n  cursor: not-allowed;\n  background: color-mix(in srgb, currentColor 4%, Canvas);\n}\n\n.task:focus-visible {\n  outline: 2px solid #42b883;\n  outline-offset: 2px;\n}\n\n.task[data-dnd-placeholder] {\n  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, #42b883 50%, transparent);\n  background: color-mix(in srgb, #42b883 7%, Canvas);\n}\n\n.task[data-dnd-placeholder] > * {\n  visibility: hidden;\n}\n\n[data-dnd-overlay] .task {\n  box-shadow:\n    0 0 0 1px color-mix(in srgb, currentColor 14%, transparent),\n    0 16px 28px -14px rgb(0 0 0 \u002F 0.5);\n}\n\ninput[type='checkbox'] {\n  width: 16px;\n  height: 16px;\n  margin: 0;\n  accent-color: #42b883;\n  cursor: pointer;\n}\n\n.title {\n  flex: 1;\n  min-width: 0;\n  padding: 4px 0;\n  font-size: 13px;\n}\n\nselect {\n  padding: 3px 6px;\n  border: 1px solid color-mix(in srgb, currentColor 18%, transparent);\n  border-radius: 6px;\n  background: Canvas;\n  color: inherit;\n  font: 12px\u002F1.2 system-ui, sans-serif;\n  cursor: pointer;\n}\n\nselect:focus-visible {\n  outline: 2px solid #42b883;\n}\n\n.done .title {\n  text-decoration: line-through;\n  opacity: 0.5;\n}\n\n.lock {\n  padding: 3px 7px;\n  border-radius: 99px;\n  background: color-mix(in srgb, currentColor 8%, transparent);\n  font: 10px\u002F1 ui-monospace, Menlo, Consolas, monospace;\n  opacity: 0.7;\n}\n\u003C\u002Fstyle>","\u003Cpre class=\"shiki shiki-themes dnd-light dnd-dark\" style=\"--shiki-light:#27272a;--shiki-dark:#e4e4e7;--shiki-light-bg:#00000000;--shiki-dark-bg:#00000000\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><script\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> setup\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> lang\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"ts\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> useTemplateRef \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'vue'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> makeSortableItem \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '@vue-dnd-kit\u002Fcore'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> props \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> defineProps\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><{\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">  task\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> number\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> title\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> done\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> boolean\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> owner\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> locked\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">?:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> boolean\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> };\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">  shiftOnly\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> boolean\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}>();\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> emit \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> defineEmits\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><{\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> refused\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> []\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> }>();\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> el \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> useTemplateRef\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">HTMLElement\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">>(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">'el'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">makeSortableItem\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">el\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">  item\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ()\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> props\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">task\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">  \u002F\u002F Never: the row is locked (and says so to screen readers with aria-disabled).\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">  disabled\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ()\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> !!\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">props\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">task\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">locked\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">  \u002F\u002F Per press: pointer drags only with Shift held; the keyboard as usual.\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">  canDrag\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">    if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (!\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">props\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">shiftOnly \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">||\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> event \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">instanceof\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> KeyboardEvent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ||\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">shiftKey\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> true\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">    emit\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">'refused'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">    return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> false\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">});\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fscript>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><template>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <li\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> ref\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"el\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"task\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> :class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"{ done: task.done, locked: task.locked }\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">    <!-- Controls inside a draggable keep working: a press on them never starts a drag. -->\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <input\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> v-model\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"task.done\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"checkbox\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> :aria-label\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"`Done: ${task.title}`\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <span\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"title\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">{{ task.title }}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fspan>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <span\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> v-if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"task.locked\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"lock\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">locked\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fspan>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <select\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> v-else\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> v-model\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"task.owner\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> :aria-label\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"`Owner of ${task.title}`\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">      <option\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> v-for\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"owner in ['Ana', 'Ben', 'Kim']\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> :key\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"owner\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">{{ owner }}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Foption>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <\u002Fselect>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <\u002Fli>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Ftemplate>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><style\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> scoped\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">task\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  align-items\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> center\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  gap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 10\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  padding\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 8\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 10\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 10\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Canvas\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  box-shadow\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> srgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> currentColor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 9\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> transparent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  cursor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> grab\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  user-select\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">task\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">locked\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  cursor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> not-allowed\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> srgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> currentColor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 4\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> Canvas\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">task\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">focus-visible\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  outline\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> solid\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">42b883\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  outline-offset\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">task\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">data-dnd-placeholder\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">]\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  box-shadow\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> inset\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1.5\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> srgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">42b883 \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">50\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> transparent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> srgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">42b883 \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">7\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> Canvas\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">task\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">data-dnd-placeholder\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">]\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> >\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> *\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  visibility\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> hidden\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">data-dnd-overlay\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">]\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> .\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">task\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  box-shadow\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">    0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> srgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> currentColor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 14\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> transparent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">),\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">    0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 16\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 28\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> -14\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> rgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> \u002F \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0.5\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">input\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">'checkbox'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">]\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 16\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 16\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  margin\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  accent-color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">42b883\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  cursor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> pointer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">title\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  min-width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  padding\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 4\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font-size\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 13\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">select\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  padding\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 3\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 6\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> solid\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> srgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> currentColor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 18\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> transparent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 6\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Canvas\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> inherit\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 12\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">1.2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> system-ui\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> sans-serif\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  cursor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> pointer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">select\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">focus-visible\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  outline\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> solid\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">42b883\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">done\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> .\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">title\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  text-decoration\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> line-through\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  opacity\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0.5\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">lock\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  padding\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 3\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 7\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 99\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> srgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> currentColor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 8\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> transparent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 10\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> ui-monospace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Menlo\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Consolas\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> monospace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  opacity\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0.7\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fstyle>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[3570,3573,3577,3581,3584],{"name":3545,"lang":549,"code":3571,"html":3572},"\u003Cscript setup lang=\"ts\">\nimport { onMounted, useTemplateRef } from 'vue';\nimport { DnDProvider, keyboardSensor, pointerSensor } from '@vue-dnd-kit\u002Fcore';\nimport Party from '.\u002FParty.vue';\nimport Gamepad from '.\u002FGamepad.vue';\nimport { createJoystick } from '.\u002Fjoystick';\n\nconst stage = useTemplateRef\u003CHTMLElement>('stage');\nconst joystick = createJoystick(() => stage.value);\n\u002F\u002F The gamepad drives drags next to the mouse, touch and the keyboard.\nconst sensors = [pointerSensor, keyboardSensor, joystick.sensor];\n\nonMounted(() => {\n  const first = stage.value?.querySelector('li');\n  if (first) joystick.aim(first);\n});\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CDnDProvider :sensors=\"sensors\">\n    \u003Cdiv ref=\"stage\" class=\"arcade\">\n      \u003CParty \u002F>\n      \u003CGamepad :joystick=\"joystick\" \u002F>\n      \u003Cspan class=\"cursor\" :style=\"{ left: `${joystick.cursor.value.x}px`, top: `${joystick.cursor.value.y}px` }\" \u002F>\n    \u003C\u002Fdiv>\n  \u003C\u002FDnDProvider>\n\u003C\u002Ftemplate>\n\n\u003Cstyle scoped>\n.arcade {\n  position: relative;\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: center;\n  gap: 32px 48px;\n  padding: 8px;\n}\n\n\u002F* The gamepad's cursor: above everything, never what a hit test finds. *\u002F\n.cursor {\n  position: absolute;\n  z-index: 1;\n  width: 18px;\n  height: 18px;\n  margin: -9px 0 0 -9px;\n  border: 2px solid #42b883;\n  border-radius: 50%;\n  background: color-mix(in srgb, #42b883 25%, transparent);\n  box-shadow: 0 0 0 4px color-mix(in srgb, #42b883 15%, transparent);\n  pointer-events: none;\n}\n\u003C\u002Fstyle>","\u003Cpre class=\"shiki shiki-themes dnd-light dnd-dark\" style=\"--shiki-light:#27272a;--shiki-dark:#e4e4e7;--shiki-light-bg:#00000000;--shiki-dark-bg:#00000000\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><script\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> setup\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> lang\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"ts\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> onMounted\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> useTemplateRef \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'vue'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> DnDProvider\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> keyboardSensor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> pointerSensor \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '@vue-dnd-kit\u002Fcore'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Party \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '.\u002FParty.vue'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Gamepad \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '.\u002FGamepad.vue'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> createJoystick \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '.\u002Fjoystick'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> stage \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> useTemplateRef\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">HTMLElement\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">>(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">'stage'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> joystick \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> createJoystick\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(()\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> stage\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F\u002F The gamepad drives drags next to the mouse, touch and the keyboard.\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> sensors \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> [\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">pointerSensor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> keyboardSensor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> joystick\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">sensor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">];\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">onMounted\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(()\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> first \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> stage\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">?.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">querySelector\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">'li'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">first\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> joystick\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">aim\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">first\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">});\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fscript>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><template>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <DnDProvider\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">sensors\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">sensors\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <div\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> ref\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"stage\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"arcade\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">      <Party\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">      <Gamepad\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">joystick\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">joystick\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">      <span\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"cursor\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> :style\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"{ left: `${joystick.cursor.value.x}px`, top: `${joystick.cursor.value.y}px` }\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> \u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <\u002Fdiv>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <\u002FDnDProvider>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Ftemplate>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><style\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> scoped\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">arcade\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  position\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> relative\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  flex-wrap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> wrap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  align-items\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> center\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  justify-content\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> center\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  gap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 32\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 48\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  padding\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 8\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F* The gamepad's cursor: above everything, never what a hit test finds. *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">cursor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  position\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> absolute\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  z-index\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 18\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 18\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  margin\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> -9\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> -9\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> solid\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">42b883\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 50\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> srgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">42b883 \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">25\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> transparent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  box-shadow\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 4\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> srgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">42b883 \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">15\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> transparent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  pointer-events\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fstyle>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"name":3574,"lang":549,"code":3575,"html":3576},"Gamepad.vue","\u003Cscript setup lang=\"ts\">\nimport { computed, onBeforeUnmount } from 'vue';\nimport { useDnD } from '@vue-dnd-kit\u002Fcore';\nimport type { Joystick } from '.\u002Fjoystick';\n\nconst props = defineProps\u003C{ joystick: Joystick }>();\nconst { status, activation } = useDnD();\n\n\u002F\u002F Holding an arrow moves the cursor every frame, like a stick.\nconst SPEED = 4;\nlet frame = 0;\nconst hold = (dx: number, dy: number) => {\n  const tick = () => {\n    props.joystick.move(dx * SPEED, dy * SPEED);\n    frame = requestAnimationFrame(tick);\n  };\n  stop();\n  tick();\n};\nconst stop = () => cancelAnimationFrame(frame);\nonBeforeUnmount(stop);\n\nconst ARROWS = [\n  { name: 'up', dx: 0, dy: -1 },\n  { name: 'left', dx: -1, dy: 0 },\n  { name: 'right', dx: 1, dy: 0 },\n  { name: 'down', dx: 0, dy: 1 },\n];\n\n\u002F** A fills while it is held over an item. *\u002F\nconst charge = computed(() => (status.value === 'activating' ? activation.progress.value : 0));\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"gamepad\">\n    \u003Cdiv class=\"pad\">\n      \u003Cbutton\n        v-for=\"arrow in ARROWS\"\n        :key=\"arrow.name\"\n        type=\"button\"\n        :class=\"arrow.name\"\n        :aria-label=\"`Cursor ${arrow.name}`\"\n        @pointerdown=\"hold(arrow.dx, arrow.dy)\"\n        @pointerup=\"stop\"\n        @pointerleave=\"stop\"\n        @pointercancel=\"stop\"\n      \u002F>\n      \u003Cspan class=\"hub\" \u002F>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"actions\">\n      \u003Cbutton\n        type=\"button\"\n        class=\"a\"\n        :style=\"{ '--charge': charge }\"\n        aria-label=\"A: hold to pick up, press to drop\"\n        @pointerdown=\"joystick.press\"\n        @pointerup=\"joystick.release\"\n        @pointerleave=\"joystick.release\"\n      >\n        A\n      \u003C\u002Fbutton>\n      \u003Cbutton type=\"button\" class=\"b\" aria-label=\"B: cancel\" @pointerdown=\"joystick.cancel\">B\u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n    \u003Coutput class=\"status\">{{ status }}\u003C\u002Foutput>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cstyle scoped>\n.gamepad {\n  display: grid;\n  grid-template-columns: auto auto;\n  align-items: center;\n  gap: 18px 28px;\n  padding: 22px 26px 16px;\n  border-radius: 40px;\n  background: linear-gradient(160deg, color-mix(in srgb, currentColor 10%, Canvas), color-mix(in srgb, currentColor 4%, Canvas));\n  box-shadow:\n    inset 0 1px 0 color-mix(in srgb, currentColor 12%, transparent),\n    0 18px 36px -20px rgb(0 0 0 \u002F 0.6);\n  user-select: none;\n}\n\nbutton {\n  border: 0;\n  color: inherit;\n  cursor: pointer;\n  touch-action: none;\n}\n\n\u002F* The cross: four arms around an empty middle. *\u002F\n.pad {\n  display: grid;\n  grid-template: repeat(3, 30px) \u002F repeat(3, 30px);\n}\n\n.pad button,\n.hub {\n  background: color-mix(in srgb, currentColor 22%, Canvas);\n  box-shadow: 0 3px 0 color-mix(in srgb, currentColor 30%, Canvas);\n}\n\n.hub {\n  grid-area: 2 \u002F 2;\n}\n\n\u002F* A small arrow on each arm. *\u002F\n.pad button::after {\n  content: '';\n  display: block;\n  width: 0;\n  height: 0;\n  margin: auto;\n  border: 5px solid transparent;\n  opacity: 0.5;\n}\n\n.pad .up::after {\n  border-top-width: 0;\n  border-bottom-color: currentColor;\n}\n\n.pad .down::after {\n  border-bottom-width: 0;\n  border-top-color: currentColor;\n}\n\n.pad .left::after {\n  border-left-width: 0;\n  border-right-color: currentColor;\n}\n\n.pad .right::after {\n  border-right-width: 0;\n  border-left-color: currentColor;\n}\n\n.pad button:active {\n  translate: 0 2px;\n  box-shadow: 0 1px 0 color-mix(in srgb, currentColor 30%, Canvas);\n}\n\n.pad .up {\n  grid-area: 1 \u002F 2;\n  border-radius: 6px 6px 0 0;\n}\n\n.pad .left {\n  grid-area: 2 \u002F 1;\n  border-radius: 6px 0 0 6px;\n}\n\n.pad .right {\n  grid-area: 2 \u002F 3;\n  border-radius: 0 6px 6px 0;\n}\n\n.pad .down {\n  grid-area: 3 \u002F 2;\n  border-radius: 0 0 6px 6px;\n}\n\n.actions {\n  display: flex;\n  gap: 12px;\n  padding-top: 18px;\n}\n\n.actions .a {\n  margin-top: -22px;\n}\n\n.a,\n.b {\n  width: 46px;\n  height: 46px;\n  border-radius: 50%;\n  color: #fff;\n  font: 700 15px\u002F1 system-ui, sans-serif;\n}\n\n\u002F* The hold fills A from the bottom. *\u002F\n.a {\n  background: linear-gradient(to top, #2f9468 calc(var(--charge) * 100%), #42b883 calc(var(--charge) * 100%));\n  box-shadow:\n    0 4px 0 #2a7a57,\n    0 0 0 calc(var(--charge) * 6px) color-mix(in srgb, #42b883 35%, transparent);\n}\n\n.b {\n  background: #f43f5e;\n  box-shadow: 0 4px 0 #b9233f;\n}\n\n.a:active,\n.b:active {\n  translate: 0 3px;\n  box-shadow: 0 1px 0 rgb(0 0 0 \u002F 0.3);\n}\n\n.status {\n  grid-column: 1 \u002F -1;\n  font: 11px\u002F1 ui-monospace, Menlo, Consolas, monospace;\n  text-align: center;\n  opacity: 0.55;\n}\n\u003C\u002Fstyle>","\u003Cpre class=\"shiki shiki-themes dnd-light dnd-dark\" style=\"--shiki-light:#27272a;--shiki-dark:#e4e4e7;--shiki-light-bg:#00000000;--shiki-dark-bg:#00000000\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><script\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> setup\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> lang\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"ts\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> computed\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> onBeforeUnmount \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'vue'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> useDnD \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '@vue-dnd-kit\u002Fcore'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Joystick \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '.\u002Fjoystick'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> props \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> defineProps\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><{\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> joystick\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Joystick\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> }>();\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> status\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> activation \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> useDnD\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">();\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F\u002F Holding an arrow moves the cursor every frame, like a stick.\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> SPEED \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 4\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">let\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> frame \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> hold\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">dx\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> number\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> dy\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> number\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> tick\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ()\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">    props\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">joystick\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">move\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">dx \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">*\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> SPEED\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> dy \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">*\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> SPEED\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">    frame \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> requestAnimationFrame\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">tick\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  };\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">  stop\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">();\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">  tick\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">();\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">};\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> stop\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ()\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> cancelAnimationFrame\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">frame\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">onBeforeUnmount\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">stop\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> ARROWS \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> [\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'up'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> dx\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> dy\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> -\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'left'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> dx\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> -\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> dy\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'right'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> dx\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> dy\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'down'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> dx\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> dy\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">];\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F** A fills while it is held over an item. *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> charge \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> computed\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(()\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">status\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">===\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'activating'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ?\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> activation\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">progress\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">));\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fscript>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><template>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <div\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"gamepad\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <div\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"pad\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">      <button\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">        v-for\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"arrow in ARROWS\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">        :key\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"arrow.name\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">        type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"button\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">        :class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"arrow.name\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">        :aria-label\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"`Cursor ${arrow.name}`\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">        @pointerdown\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"hold(arrow.dx, arrow.dy)\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">        @pointerup\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"stop\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">        @pointerleave\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"stop\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">        @pointercancel\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"stop\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">      \u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">      <span\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"hub\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> \u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <\u002Fdiv>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <div\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"actions\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">      <button\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">        type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"button\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">        class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"a\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">        :style\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"{ '--charge': charge }\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">        aria-label\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"A: hold to pick up, press to drop\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">        @pointerdown\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"joystick.press\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">        @pointerup\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"joystick.release\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">        @pointerleave\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"joystick.release\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">      >\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">        A\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">      <\u002Fbutton>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">      <button\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"button\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"b\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> aria-label\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"B: cancel\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> @pointerdown\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"joystick.cancel\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">B\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fbutton>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <\u002Fdiv>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <output\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"status\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">{{ status }}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Foutput>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <\u002Fdiv>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Ftemplate>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><style\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> scoped\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">gamepad\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> grid\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  grid-template-columns\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> auto\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> auto\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  align-items\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> center\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  gap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 18\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 28\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  padding\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 22\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 26\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 16\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 40\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> linear-gradient\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">160\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">deg\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> srgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> currentColor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 10\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> Canvas\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">),\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> srgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> currentColor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 4\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> Canvas\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">));\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  box-shadow\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">    inset\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> srgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> currentColor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 12\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> transparent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">),\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">    0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 18\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 36\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> -20\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> rgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> \u002F \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0.6\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  user-select\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">button\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> inherit\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  cursor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> pointer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  touch-action\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F* The cross: four arms around an empty middle. *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">pad\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> grid\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  grid-template\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> repeat\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">3\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 30\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> \u002F \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">repeat\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">3\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 30\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">pad\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> button\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">hub\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> srgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> currentColor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 22\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> Canvas\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  box-shadow\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 3\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> srgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> currentColor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 30\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> Canvas\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">hub\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  grid-area\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> \u002F \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F* A small arrow on each arm. *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">pad\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> button\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">::\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">after\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  content\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> ''\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> block\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  margin\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> auto\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 5\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> solid\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> transparent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  opacity\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0.5\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">pad\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> .\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">up\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">::\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">after\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-top-width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-bottom-color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> currentColor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">pad\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> .\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">down\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">::\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">after\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-bottom-width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-top-color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> currentColor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">pad\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> .\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">left\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">::\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">after\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-left-width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-right-color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> currentColor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">pad\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> .\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">right\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">::\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">after\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-right-width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-left-color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> currentColor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">pad\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> button\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">active\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  translate\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  box-shadow\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> srgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> currentColor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 30\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> Canvas\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">pad\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> .\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">up\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  grid-area\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> \u002F \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 6\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 6\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">pad\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> .\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">left\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  grid-area\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> \u002F \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 6\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 6\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">pad\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> .\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">right\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  grid-area\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> \u002F \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">3\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 6\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 6\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">pad\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> .\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">down\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  grid-area\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 3\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> \u002F \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 6\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 6\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">actions\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  gap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 12\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  padding-top\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 18\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">actions\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> .\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">a\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  margin-top\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> -22\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">a\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">b\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 46\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 46\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 50\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">fff\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 700\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 15\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> system-ui\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> sans-serif\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F* The hold fills A from the bottom. *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">a\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> linear-gradient\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(to\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> top\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">2f9468 \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">calc\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">var\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">--charge\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> *\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 100\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">),\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">42b883 \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">calc\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">var\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">--charge\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> *\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 100\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">));\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  box-shadow\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">    0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 4\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">2a7a57\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">    0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> calc\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">var\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">--charge\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> *\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 6\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> srgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">42b883 \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">35\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> transparent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">b\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">f43f5e\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  box-shadow\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 4\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">b9233f\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">a\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">active\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">b\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">active\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  translate\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 3\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  box-shadow\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> rgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> \u002F \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0.3\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">status\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  grid-column\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> \u002F \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">-1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 11\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> ui-monospace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Menlo\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Consolas\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> monospace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  text-align\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> center\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  opacity\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0.55\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fstyle>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"name":3578,"lang":549,"code":3579,"html":3580},"Hero.vue","\u003Cscript setup lang=\"ts\">\nimport { useTemplateRef } from 'vue';\nimport { makeSortableItem } from '@vue-dnd-kit\u002Fcore';\n\nconst props = defineProps\u003C{\n  hero: { id: string; name: string; role: string; level: number; hue: number };\n  slotNumber: number;\n}>();\nconst el = useTemplateRef\u003CHTMLElement>('el');\nmakeSortableItem(el, { item: () => props.hero });\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cli ref=\"el\" class=\"hero\" :style=\"{ '--hue': hero.hue }\">\n    \u003Cspan class=\"number\">{{ slotNumber }}\u003C\u002Fspan>\n    \u003Cspan class=\"crest\">{{ hero.role[0] }}\u003C\u002Fspan>\n    \u003Cspan class=\"text\">\n      \u003Cstrong>{{ hero.name }}\u003C\u002Fstrong>\n      \u003Csmall>{{ hero.role }}\u003C\u002Fsmall>\n    \u003C\u002Fspan>\n    \u003Cspan class=\"level\">Lv {{ hero.level }}\u003C\u002Fspan>\n  \u003C\u002Fli>\n\u003C\u002Ftemplate>\n\n\u003Cstyle scoped>\n.hero {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 7px 10px;\n  border-radius: 12px;\n  background: Canvas;\n  box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 10%, transparent);\n  cursor: grab;\n  user-select: none;\n}\n\n.hero:focus-visible {\n  outline: 2px solid #42b883;\n  outline-offset: 2px;\n}\n\n.hero[data-dnd-placeholder] {\n  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, currentColor 25%, transparent);\n  background: none;\n}\n\n.hero[data-dnd-placeholder] > * {\n  visibility: hidden;\n}\n\n[data-dnd-overlay] .hero {\n  box-shadow:\n    0 0 0 2px hsl(var(--hue) 70% 55%),\n    0 16px 28px -14px rgb(0 0 0 \u002F 0.55);\n}\n\n.number {\n  width: 12px;\n  font: 11px\u002F1 ui-monospace, Menlo, Consolas, monospace;\n  opacity: 0.4;\n}\n\n.crest {\n  display: grid;\n  place-items: center;\n  width: 30px;\n  height: 30px;\n  border-radius: 9px;\n  background: linear-gradient(135deg, hsl(var(--hue) 75% 60%), hsl(var(--hue) 60% 40%));\n  color: #fff;\n  font-weight: 700;\n}\n\n.text {\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  gap: 2px;\n  font-size: 13px;\n}\n\n.text small {\n  opacity: 0.55;\n}\n\n.level {\n  font: 11px\u002F1 ui-monospace, Menlo, Consolas, monospace;\n  opacity: 0.6;\n}\n\u003C\u002Fstyle>","\u003Cpre class=\"shiki shiki-themes dnd-light dnd-dark\" style=\"--shiki-light:#27272a;--shiki-dark:#e4e4e7;--shiki-light-bg:#00000000;--shiki-dark-bg:#00000000\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><script\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> setup\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> lang\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"ts\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> useTemplateRef \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'vue'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> makeSortableItem \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '@vue-dnd-kit\u002Fcore'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> props \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> defineProps\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><{\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">  hero\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> role\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> level\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> number\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> hue\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> number\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> };\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">  slotNumber\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> number\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}>();\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> el \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> useTemplateRef\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">HTMLElement\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">>(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">'el'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">makeSortableItem\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">el\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> item\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ()\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> props\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">hero \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">});\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fscript>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><template>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <li\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> ref\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"el\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"hero\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> :style\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"{ '--hue': hero.hue }\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <span\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"number\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">{{ slotNumber }}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fspan>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <span\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"crest\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">{{ hero.role[0] }}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fspan>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <span\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"text\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">      <strong>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">{{ hero.name }}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fstrong>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">      <small>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">{{ hero.role }}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fsmall>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <\u002Fspan>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <span\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"level\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">Lv {{ hero.level }}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fspan>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <\u002Fli>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Ftemplate>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><style\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> scoped\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">hero\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  align-items\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> center\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  gap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 10\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  padding\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 7\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 10\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 12\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Canvas\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  box-shadow\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> srgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> currentColor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 10\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> transparent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  cursor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> grab\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  user-select\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">hero\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">focus-visible\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  outline\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> solid\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">42b883\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  outline-offset\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">hero\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">data-dnd-placeholder\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">]\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  box-shadow\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> inset\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1.5\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> srgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> currentColor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 25\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> transparent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">hero\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">data-dnd-placeholder\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">]\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> >\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> *\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  visibility\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> hidden\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">data-dnd-overlay\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">]\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> .\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">hero\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  box-shadow\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">    0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> hsl\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">var\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">--hue\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 70\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 55\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">),\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">    0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 16\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 28\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> -14\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> rgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> \u002F \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0.55\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">number\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 12\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 11\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> ui-monospace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Menlo\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Consolas\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> monospace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  opacity\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0.4\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">crest\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> grid\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  place-items\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> center\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 30\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 30\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 9\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> linear-gradient\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">135\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">deg\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> hsl\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">var\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">--hue\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 75\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 60\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">),\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> hsl\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">var\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">--hue\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 60\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 40\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">));\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">fff\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font-weight\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 700\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">text\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  flex-direction\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> column\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  gap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font-size\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 13\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">text\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> small\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  opacity\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0.55\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">level\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 11\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> ui-monospace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Menlo\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Consolas\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> monospace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  opacity\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0.6\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fstyle>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"name":1674,"lang":843,"code":3582,"html":3583},"import { shallowRef } from 'vue';\nimport { defineSensor, type Coordinates, type SensorContext, type SensorDrag } from '@vue-dnd-kit\u002Fcore';\n\n\u002F**\n * An on-screen gamepad as a sensor. It moves a cursor over `stage`; holding A picks up what\n * is under the cursor, the pad then drags it, A drops and B cancels. The sensor only says\n * \"drag this from here\", where it moved, drop or cancel: the provider does the rest.\n *\u002F\nexport function createJoystick(stage: () => HTMLElement | null) {\n  \u002F** In the stage's coordinates: the cursor scrolls with the page. *\u002F\n  const cursor = shallowRef\u003CCoordinates>({ x: 0, y: 0 });\n  let context: SensorContext | null = null;\n  let drag: SensorDrag | null = null;\n\n  const sensor = defineSensor({\n    name: 'joystick',\n    \u002F\u002F Once per provider, in the browser. The cleanup runs when the provider unmounts.\n    setup(ctx) {\n      context = ctx;\n      return () => {\n        context = null;\n        drag = null;\n      };\n    },\n  });\n\n  \u002F** The cursor in viewport coordinates: what the provider takes. *\u002F\n  const point = (): Coordinates => {\n    const box = stage()?.getBoundingClientRect();\n    return { x: (box?.left ?? 0) + cursor.value.x, y: (box?.top ?? 0) + cursor.value.y };\n  };\n\n  \u002F** Puts the cursor on the middle of an element. *\u002F\n  const aim = (element: Element) => {\n    const box = element.getBoundingClientRect();\n    const origin = stage()?.getBoundingClientRect() ?? { left: 0, top: 0 };\n    cursor.value = { x: box.left + box.width \u002F 2 - origin.left, y: box.top + box.height \u002F 2 - origin.top };\n  };\n\n  \u002F** The pad: the cursor moves, and the drag with it (one position per frame). *\u002F\n  const move = (dx: number, dy: number) => {\n    const box = stage()?.getBoundingClientRect();\n    if (!box) return;\n    cursor.value = {\n      x: Math.min(Math.max(cursor.value.x + dx, 0), box.width),\n      y: Math.min(Math.max(cursor.value.y + dy, 0), box.height),\n    };\n    drag?.move(point());\n  };\n\n  \u002F** A goes down: drops a running drag, or starts a hold over what is under the cursor. *\u002F\n  const press = () => {\n    if (drag?.state === 'dragging') return void drag.drop();\n    const at = point();\n    const target = document.elementFromPoint(at.x, at.y);\n    if (!target || !context) return;\n    drag = context.activate({\n      target, \u002F\u002F checked like a real press: a draggable of this provider, not disabled\n      point: at,\n      type: 'pointer', \u002F\u002F follows points: lists sort under it, containers auto-scroll\n      activation: { delay: 300 }, \u002F\u002F `useDnD().activation.progress` runs meanwhile\n      onEnd: (ended) => {\n        if (drag === ended) drag = null;\n      },\n    }); \u002F\u002F null: nothing to drag there\n  };\n\n  \u002F** A goes up before the hold is over: no drag. *\u002F\n  const release = () => {\n    if (drag?.state === 'pending') drag.cancel();\n  };\n\n  const cancel = () => drag?.cancel();\n\n  return { sensor, cursor, aim, move, press, release, cancel };\n}\n\nexport type Joystick = ReturnType\u003Ctypeof createJoystick>;","\u003Cpre class=\"shiki shiki-themes dnd-light dnd-dark\" style=\"--shiki-light:#27272a;--shiki-dark:#e4e4e7;--shiki-light-bg:#00000000;--shiki-dark-bg:#00000000\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> shallowRef \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'vue'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> defineSensor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Coordinates\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> SensorContext\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> SensorDrag \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '@vue-dnd-kit\u002Fcore'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F**\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\"> * An on-screen gamepad as a sensor. It moves a cursor over `stage`; holding A picks up what\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\"> * is under the cursor, the pad then drags it, A drops and B cancels. The sensor only says\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\"> * \"drag this from here\", where it moved, drop or cancel: the provider does the rest.\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\"> *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">export\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> function\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> createJoystick\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">stage\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ()\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> HTMLElement\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> |\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> null\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">  \u002F** In the stage's coordinates: the cursor scrolls with the page. *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> cursor \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> shallowRef\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">Coordinates\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">>({\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> x\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> y\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> });\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  let\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> context\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> SensorContext\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> |\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> null\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> null\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  let\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> drag\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> SensorDrag\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> |\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> null\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> null\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> sensor \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> defineSensor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">({\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">    name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'joystick'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">    \u002F\u002F Once per provider, in the browser. The cleanup runs when the provider unmounts.\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">    setup\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">ctx\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">      context \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> ctx\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">      return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ()\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">        context \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> null\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">        drag \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> null\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">      };\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">    },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  });\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">  \u002F** The cursor in viewport coordinates: what the provider takes. *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> point\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ():\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Coordinates\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">    const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> box \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> stage\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">()?.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">getBoundingClientRect\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">();\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">    return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> x\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">?.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">left \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">??\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> +\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> cursor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">x\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> y\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">?.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">top \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">??\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> +\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> cursor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">y \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">};\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  };\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">  \u002F** Puts the cursor on the middle of an element. *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> aim\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">element\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Element\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">    const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> box \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> element\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">getBoundingClientRect\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">();\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">    const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> origin \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> stage\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">()?.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">getBoundingClientRect\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">()\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ??\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> left\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> top\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> };\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">    cursor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> x\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">left \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">+\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">width \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> -\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> origin\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">left\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> y\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">top \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">+\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">height \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> -\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> origin\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">top \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">};\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  };\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">  \u002F** The pad: the cursor moves, and the drag with it (one position per frame). *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> move\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">dx\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> number\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> dy\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> number\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">    const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> box \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> stage\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">()?.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">getBoundingClientRect\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">();\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">    if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (!\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">    cursor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">      x\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> Math\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">min\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">Math\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">max\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">cursor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">x \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">+\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> dx\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">),\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">),\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">      y\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> Math\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">min\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">Math\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">max\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">cursor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">y \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">+\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> dy\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">),\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">),\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">    };\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">    drag\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">?.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">move\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">point\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">());\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  };\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">  \u002F** A goes down: drops a running drag, or starts a hold over what is under the cursor. *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> press\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ()\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">    if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">drag\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">?.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">state \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">===\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'dragging'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> void\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> drag\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">drop\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">();\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">    const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> at \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> point\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">();\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">    const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> target \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> document\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">elementFromPoint\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">at\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">x\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> at\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">y\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">    if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (!\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">target \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">||\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> !\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">context\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">    drag \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> context\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">activate\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">({\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">      target\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\"> \u002F\u002F checked like a real press: a draggable of this provider, not disabled\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">      point\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> at\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">      type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'pointer'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\"> \u002F\u002F follows points: lists sort under it, containers auto-scroll\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">      activation\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> delay\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 300\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> },\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\"> \u002F\u002F `useDnD().activation.progress` runs meanwhile\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">      onEnd\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">ended\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">        if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">drag \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">===\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> ended\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> drag \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> null\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">      },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">    });\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\"> \u002F\u002F null: nothing to drag there\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  };\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">  \u002F** A goes up before the hold is over: no drag. *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> release\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ()\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">    if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">drag\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">?.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">state \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">===\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'pending'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> drag\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">cancel\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">();\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  };\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> cancel\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ()\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> drag\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">?.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">cancel\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">();\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> sensor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> cursor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> aim\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> move\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> press\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> release\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> cancel \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">};\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">export\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Joystick\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> ReturnType\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><typeof\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> createJoystick\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">>;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"name":3585,"lang":549,"code":3586,"html":3587},"Party.vue","\u003Cscript setup lang=\"ts\">\nimport { ref, useTemplateRef } from 'vue';\nimport { makeSortableList } from '@vue-dnd-kit\u002Fcore';\nimport Hero from '.\u002FHero.vue';\n\nconst heroes = ref([\n  { id: 'knight', name: 'Brienne', role: 'Knight', level: 12, hue: 210 },\n  { id: 'mage', name: 'Ilyas', role: 'Mage', level: 9, hue: 270 },\n  { id: 'rogue', name: 'Vex', role: 'Rogue', level: 11, hue: 330 },\n  { id: 'cleric', name: 'Odette', role: 'Cleric', level: 8, hue: 45 },\n  { id: 'ranger', name: 'Tamsin', role: 'Ranger', level: 10, hue: 140 },\n]);\nconst listRef = useTemplateRef\u003CHTMLElement>('list');\nconst { items } = makeSortableList(listRef, { items: heroes });\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Csection class=\"party\">\n    \u003Ch3>Party order\u003C\u002Fh3>\n    \u003Col ref=\"list\" class=\"list\">\n      \u003CHero v-for=\"(hero, index) in items\" :key=\"hero.id\" :hero=\"hero\" :slot-number=\"index + 1\" \u002F>\n    \u003C\u002Fol>\n  \u003C\u002Fsection>\n\u003C\u002Ftemplate>\n\n\u003Cstyle scoped>\n.party {\n  width: min(260px, 100%);\n}\n\nh3 {\n  margin: 0 0 10px 4px;\n  font: 600 11px\u002F1 ui-monospace, Menlo, Consolas, monospace;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  opacity: 0.55;\n}\n\n.list {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\u003C\u002Fstyle>","\u003Cpre class=\"shiki shiki-themes dnd-light dnd-dark\" style=\"--shiki-light:#27272a;--shiki-dark:#e4e4e7;--shiki-light-bg:#00000000;--shiki-dark-bg:#00000000\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><script\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> setup\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> lang\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"ts\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> ref\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> useTemplateRef \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'vue'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> makeSortableList \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '@vue-dnd-kit\u002Fcore'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Hero \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '.\u002FHero.vue'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> heroes \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> ref\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">([\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'knight'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Brienne'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> role\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Knight'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> level\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 12\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> hue\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 210\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'mage'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Ilyas'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> role\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Mage'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> level\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 9\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> hue\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 270\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'rogue'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Vex'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> role\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Rogue'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> level\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 11\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> hue\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 330\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'cleric'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Odette'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> role\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Cleric'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> level\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 8\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> hue\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 45\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'ranger'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Tamsin'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> role\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Ranger'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> level\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 10\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> hue\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 140\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">]);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> listRef \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> useTemplateRef\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">HTMLElement\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">>(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">'list'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> items \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> makeSortableList\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">listRef\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> items\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> heroes \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">});\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fscript>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><template>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <section\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"party\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <h3>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">Party order\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fh3>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <ol\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> ref\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"list\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"list\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">      <Hero\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> v-for\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">hero\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> index\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> items\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">key\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">hero\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">hero\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">hero\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">slot-number\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">index \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">+\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <\u002Fol>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <\u002Fsection>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Ftemplate>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><style\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> scoped\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">party\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> min\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">260\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 100\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">h3\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  margin\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 10\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 4\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 600\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 11\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> ui-monospace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Menlo\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Consolas\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> monospace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  letter-spacing\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0.08\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">em\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  text-transform\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> uppercase\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  opacity\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0.55\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">list\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  flex-direction\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> column\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  gap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 6\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  margin\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  padding\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  list-style\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fstyle>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[3589,3592,3596,3600],{"name":3545,"lang":549,"code":3590,"html":3591},"\u003Cscript setup lang=\"ts\">\nimport { DnDProvider } from '@vue-dnd-kit\u002Fcore';\nimport Queue from '.\u002FQueue.vue';\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003C!-- @vue-dnd-kit\u002Factions moves the rows from code: buttons, a shuffle, a scripted drag. -->\n  \u003CDnDProvider>\n    \u003CQueue \u002F>\n  \u003C\u002FDnDProvider>\n\u003C\u002Ftemplate>","\u003Cpre class=\"shiki shiki-themes dnd-light dnd-dark\" style=\"--shiki-light:#27272a;--shiki-dark:#e4e4e7;--shiki-light-bg:#00000000;--shiki-dark-bg:#00000000\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><script\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> setup\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> lang\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"ts\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> DnDProvider \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '@vue-dnd-kit\u002Fcore'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Queue \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '.\u002FQueue.vue'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fscript>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><template>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">  <!-- @vue-dnd-kit\u002Factions moves the rows from code: buttons, a shuffle, a scripted drag. -->\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <DnDProvider>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <Queue\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <\u002FDnDProvider>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Ftemplate>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"name":3593,"lang":549,"code":3594,"html":3595},"Queue.vue","\u003Cscript setup lang=\"ts\">\nimport { ref, useTemplateRef } from 'vue';\nimport { makeSortableList, useDnD } from '@vue-dnd-kit\u002Fcore';\nimport { useDnDActions } from '@vue-dnd-kit\u002Factions';\nimport TrackRow from '.\u002FTrackRow.vue';\nimport { TRACKS } from '.\u002Ftracks';\n\nconst tracks = ref(TRACKS.map((track) => ({ ...track })));\nconst listRef = useTemplateRef\u003CHTMLElement>('list');\nconst { items } = makeSortableList(listRef, { id: 'queue', items: tracks });\n\nconst { status } = useDnD();\nconst { moveItem, startDrag } = useDnDActions();\n\n\u002F** A new order (Fisher–Yates: every order as likely), as moves in a row: each waits for the one before to land. *\u002F\nconst shuffle = async () => {\n  const order = [...tracks.value];\n  for (let i = order.length - 1; i > 0; i--) {\n    const j = Math.floor(Math.random() * (i + 1));\n    [order[i], order[j]] = [order[j]!, order[i]!];\n  }\n  for (const [index, track] of order.entries()) await moveItem(track.id, { index });\n};\n\nconst pause = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));\n\n\u002F** A scripted pointer drag: the last track glides up and lands at the top. *\u002F\nconst play = async () => {\n  const last = tracks.value.at(-1)!;\n  const from = listRef.value?.querySelector(`[data-id=\"${last.id}\"]`)?.getBoundingClientRect();\n  const to = listRef.value?.firstElementChild?.getBoundingClientRect();\n  const drag = from && to ? startDrag(last.id, { from: { x: from.x + 60, y: from.y + from.height \u002F 2 } }) : null;\n  if (!drag || !from || !to) return;\n  for (let step = 1; step \u003C= 12; step++) {\n    await drag.moveTo({ x: from.x + 60 + step * 3, y: from.y + from.height \u002F 2 + ((to.y - from.y) * step) \u002F 12 });\n    await pause(28);\n  }\n  await drag.moveTo({ list: 'queue', index: 0 });\n  await pause(200);\n  await drag.drop();\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"queue\">\n    \u003Cheader>\n      \u003Cstrong>Up next\u003C\u002Fstrong>\n      \u003Cspan class=\"buttons\">\n        \u003Cbutton type=\"button\" :disabled=\"status !== 'idle'\" @click=\"shuffle\">Shuffle\u003C\u002Fbutton>\n        \u003Cbutton type=\"button\" class=\"primary\" :disabled=\"status !== 'idle'\" @click=\"play\">Play a scripted drag\u003C\u002Fbutton>\n      \u003C\u002Fspan>\n    \u003C\u002Fheader>\n    \u003Col ref=\"list\" class=\"list\">\n      \u003CTrackRow v-for=\"(track, index) in items\" :key=\"track.id\" :track=\"track\" :index=\"index\" :last=\"items.length - 1\" \u002F>\n    \u003C\u002Fol>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cstyle scoped>\n.queue {\n  width: min(460px, 100%);\n  margin: 0 auto;\n  padding: 14px;\n  border: 1px solid color-mix(in srgb, currentColor 10%, transparent);\n  border-radius: 16px;\n  background: Canvas;\n}\n\nheader {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n  margin: 0 4px 12px;\n  font-size: 14px;\n}\n\n.buttons {\n  display: flex;\n  gap: 6px;\n}\n\n.buttons button {\n  padding: 7px 11px;\n  border: 0;\n  border-radius: 8px;\n  background: color-mix(in srgb, currentColor 8%, transparent);\n  color: inherit;\n  font: 600 12px\u002F1.2 system-ui, sans-serif;\n  cursor: pointer;\n}\n\n.buttons button.primary {\n  background: #42b883;\n  color: #fff;\n}\n\n.buttons button:disabled {\n  opacity: 0.5;\n  cursor: default;\n}\n\n.list {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\u003C\u002Fstyle>","\u003Cpre class=\"shiki shiki-themes dnd-light dnd-dark\" style=\"--shiki-light:#27272a;--shiki-dark:#e4e4e7;--shiki-light-bg:#00000000;--shiki-dark-bg:#00000000\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><script\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> setup\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> lang\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"ts\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> ref\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> useTemplateRef \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'vue'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> makeSortableList\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> useDnD \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '@vue-dnd-kit\u002Fcore'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> useDnDActions \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '@vue-dnd-kit\u002Factions'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> TrackRow \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '.\u002FTrackRow.vue'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> TRACKS \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '.\u002Ftracks'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> tracks \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> ref\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">TRACKS\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">map\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">((\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">track\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ({\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ...\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">track \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">})));\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> listRef \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> useTemplateRef\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">HTMLElement\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">>(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">'list'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> items \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> makeSortableList\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">listRef\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'queue'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> items\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> tracks \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">});\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> status \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> useDnD\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">();\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> moveItem\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> startDrag \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> useDnDActions\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">();\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F** A new order (Fisher–Yates: every order as likely), as moves in a row: each waits for the one before to land. *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> shuffle\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> async\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ()\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> order \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> [...\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">tracks\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">];\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  for\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">let\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> i \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> order\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">length \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> i \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> i\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">--)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">    const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> j \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> Math\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">floor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">Math\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">random\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">()\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> *\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">i \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">+\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">));\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">    [\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">order\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">i\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">],\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> order\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">j\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">]]\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> [\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">order\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">j\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">]!,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> order\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">i\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">]!];\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  for\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> [\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">index\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> track\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">]\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> of\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> order\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">entries\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">())\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> await\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> moveItem\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">track\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> index \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">});\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">};\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> pause\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">ms\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> number\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> new\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Promise\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">((\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">resolve\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> setTimeout\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">resolve\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> ms\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">));\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F** A scripted pointer drag: the last track glides up and lands at the top. *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> play\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> async\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ()\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> last \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> tracks\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">at\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)!;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> from \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> listRef\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">?.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">querySelector\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">`[data-id=\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">${\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">last\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"]`\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)?.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">getBoundingClientRect\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">();\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> to \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> listRef\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">?.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">firstElementChild\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">?.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">getBoundingClientRect\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">();\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> drag \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> from \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">&&\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> to \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">?\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> startDrag\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">last\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> x\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">x \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">+\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 60\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> y\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">y \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">+\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">height \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> }\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> })\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> null\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (!\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">drag \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">||\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> !\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">from \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">||\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> !\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">to\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  for\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">let\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> step \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> step \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 12\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> step\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">++)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">    await\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> drag\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">moveTo\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">({\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> x\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">x \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">+\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 60\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> +\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> step \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">*\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 3\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> y\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">y \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">+\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">height \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> +\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ((\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">to\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">y \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">y\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> *\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> step\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> \u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 12\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> });\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">    await\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> pause\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">28\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  await\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> drag\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">moveTo\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">({\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> list\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'queue'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> index\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> });\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  await\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> pause\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">200\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  await\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> drag\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">drop\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">();\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">};\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fscript>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><template>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <div\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"queue\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <header>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">      <strong>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">Up next\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fstrong>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">      <span\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"buttons\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">        <button\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"button\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> :disabled\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"status !== 'idle'\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> @click\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"shuffle\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">Shuffle\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fbutton>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">        <button\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"button\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"primary\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> :disabled\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"status !== 'idle'\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> @click\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"play\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">Play a scripted drag\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fbutton>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">      <\u002Fspan>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <\u002Fheader>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <ol\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> ref\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"list\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"list\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">      <TrackRow\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> v-for\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">track\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> index\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> items\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">key\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">track\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">track\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">track\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">index\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">index\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">last\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">items\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">length \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <\u002Fol>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <\u002Fdiv>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Ftemplate>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><style\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> scoped\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">queue\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> min\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">460\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 100\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  margin\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> auto\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  padding\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 14\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> solid\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> srgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> currentColor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 10\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> transparent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 16\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Canvas\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">header\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  flex-wrap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> wrap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  align-items\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> center\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  justify-content\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> space-between\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  gap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 8\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  margin\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 4\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 12\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font-size\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 14\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">buttons\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  gap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 6\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">buttons\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> button\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  padding\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 7\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 11\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 8\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> srgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> currentColor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 8\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> transparent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> inherit\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 600\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 12\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">1.2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> system-ui\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> sans-serif\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  cursor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> pointer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">buttons\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> button\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">primary\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">42b883\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">fff\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">buttons\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> button\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">disabled\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  opacity\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0.5\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  cursor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> default\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">list\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  flex-direction\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> column\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  gap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  margin\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  padding\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  list-style\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fstyle>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"name":3597,"lang":549,"code":3598,"html":3599},"TrackRow.vue","\u003Cscript setup lang=\"ts\">\nimport { useTemplateRef } from 'vue';\nimport { makeSortableItem, type SortablePosition } from '@vue-dnd-kit\u002Fcore';\nimport { useDnDActions } from '@vue-dnd-kit\u002Factions';\nimport type { Track } from '.\u002Ftracks';\n\nconst props = defineProps\u003C{ track: Track; index: number; last: number }>();\nconst el = useTemplateRef\u003CHTMLElement>('el');\nmakeSortableItem(el, { item: () => props.track });\n\n\u002F\u002F Each move is a whole drag: animated, announced, through the list's onBeforeDrop.\nconst { moveItem } = useDnDActions();\nconst move = (to: SortablePosition) => moveItem(props.track.id, to);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cli ref=\"el\" class=\"track\" :data-id=\"track.id\">\n    \u003Cspan class=\"cover\" :style=\"{ '--hue': track.hue }\" \u002F>\n    \u003Cspan class=\"text\">\n      \u003Cstrong>{{ track.title }}\u003C\u002Fstrong>\n      \u003Csmall>{{ track.artist }}\u003C\u002Fsmall>\n    \u003C\u002Fspan>\n    \u003Cspan class=\"tools\">\n      \u003Cbutton type=\"button\" aria-label=\"Move up\" :disabled=\"index === 0\" @click=\"move({ index: index - 1 })\">↑\u003C\u002Fbutton>\n      \u003Cbutton type=\"button\" aria-label=\"Move down\" :disabled=\"index === last\" @click=\"move({ index: index + 1 })\">↓\u003C\u002Fbutton>\n      \u003Cbutton type=\"button\" aria-label=\"Move to the top\" :disabled=\"index === 0\" @click=\"move({ index: 0 })\">⤒\u003C\u002Fbutton>\n    \u003C\u002Fspan>\n    \u003Cspan class=\"length\">{{ track.length }}\u003C\u002Fspan>\n  \u003C\u002Fli>\n\u003C\u002Ftemplate>\n\n\u003Cstyle scoped>\n.track {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 8px 10px;\n  border-radius: 10px;\n  background: Canvas;\n  cursor: grab;\n  user-select: none;\n}\n\n.track:hover {\n  background: color-mix(in srgb, currentColor 4%, Canvas);\n}\n\n.track:focus-visible {\n  outline: 2px solid #42b883;\n  outline-offset: -2px;\n}\n\n.track[data-dnd-placeholder] > * {\n  visibility: hidden;\n}\n\n.track[data-dnd-placeholder] {\n  background: color-mix(in srgb, #42b883 10%, Canvas);\n}\n\n.cover {\n  width: 36px;\n  height: 36px;\n  flex: none;\n  border-radius: 8px;\n  background: linear-gradient(135deg, hsl(var(--hue) 70% 60%), hsl(calc(var(--hue) + 40) 70% 42%));\n}\n\n.text {\n  display: flex;\n  flex: 1;\n  min-width: 0;\n  flex-direction: column;\n  gap: 2px;\n  font-size: 13px;\n}\n\n.text small {\n  opacity: 0.55;\n}\n\n.tools {\n  display: flex;\n  gap: 4px;\n  opacity: 0;\n  transition: opacity 0.15s;\n}\n\n.track:hover .tools,\n.track:focus-within .tools {\n  opacity: 1;\n}\n\n.tools button {\n  width: 26px;\n  height: 26px;\n  border: 0;\n  border-radius: 6px;\n  background: color-mix(in srgb, currentColor 8%, transparent);\n  color: inherit;\n  font-size: 13px;\n  cursor: pointer;\n}\n\n.tools button:hover:not(:disabled) {\n  background: color-mix(in srgb, #42b883 22%, transparent);\n}\n\n.tools button:disabled {\n  opacity: 0.3;\n  cursor: default;\n}\n\n.length {\n  font: 11px\u002F1 ui-monospace, Menlo, Consolas, monospace;\n  opacity: 0.5;\n}\n\n\u002F* Touch screens have no hover: the buttons stay. *\u002F\n@media (hover: none) {\n  .tools {\n    opacity: 1;\n  }\n}\n\u003C\u002Fstyle>","\u003Cpre class=\"shiki shiki-themes dnd-light dnd-dark\" style=\"--shiki-light:#27272a;--shiki-dark:#e4e4e7;--shiki-light-bg:#00000000;--shiki-dark-bg:#00000000\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><script\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> setup\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> lang\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"ts\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> useTemplateRef \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'vue'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> makeSortableItem\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> SortablePosition \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '@vue-dnd-kit\u002Fcore'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> useDnDActions \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '@vue-dnd-kit\u002Factions'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Track \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '.\u002Ftracks'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> props \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> defineProps\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><{\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> track\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Track\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> index\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> number\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> last\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> number\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> }>();\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> el \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> useTemplateRef\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">HTMLElement\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">>(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">'el'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">makeSortableItem\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">el\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> item\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ()\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> props\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">track \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">});\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F\u002F Each move is a whole drag: animated, announced, through the list's onBeforeDrop.\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> moveItem \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> useDnDActions\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">();\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> move\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">to\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> SortablePosition\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> moveItem\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">props\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">track\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> to\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fscript>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><template>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <li\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> ref\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"el\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"track\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> :data-id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"track.id\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <span\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"cover\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> :style\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"{ '--hue': track.hue }\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> \u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <span\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"text\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">      <strong>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">{{ track.title }}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fstrong>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">      <small>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">{{ track.artist }}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fsmall>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <\u002Fspan>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <span\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"tools\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">      <button\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"button\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> aria-label\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"Move up\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> :disabled\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"index === 0\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> @click\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"move({ index: index - 1 })\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">↑\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fbutton>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">      <button\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"button\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> aria-label\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"Move down\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> :disabled\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"index === last\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> @click\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"move({ index: index + 1 })\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">↓\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fbutton>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">      <button\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"button\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> aria-label\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"Move to the top\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> :disabled\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"index === 0\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> @click\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"move({ index: 0 })\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">⤒\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fbutton>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <\u002Fspan>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <span\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"length\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">{{ track.length }}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fspan>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <\u002Fli>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Ftemplate>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><style\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> scoped\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">track\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  align-items\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> center\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  gap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 12\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  padding\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 8\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 10\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 10\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Canvas\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  cursor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> grab\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  user-select\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">track\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">hover\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> srgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> currentColor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 4\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> Canvas\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">track\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">focus-visible\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  outline\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> solid\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">42b883\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  outline-offset\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> -2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">track\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">data-dnd-placeholder\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">]\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> >\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> *\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  visibility\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> hidden\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">track\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">data-dnd-placeholder\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">]\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> srgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">42b883 \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">10\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> Canvas\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">cover\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 36\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 36\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 8\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> linear-gradient\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">135\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">deg\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> hsl\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">var\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">--hue\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 70\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 60\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">),\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> hsl\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">calc\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">var\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">--hue\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> +\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 40\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 70\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 42\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">));\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">text\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  min-width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  flex-direction\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> column\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  gap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font-size\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 13\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">text\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> small\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  opacity\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0.55\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">tools\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  gap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 4\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  opacity\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  transition\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> opacity \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0.15\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">s\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">track\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">hover\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> .\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">tools\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">track\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">focus-within\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> .\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">tools\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  opacity\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">tools\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> button\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 26\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 26\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 6\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> srgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> currentColor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 8\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> transparent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> inherit\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font-size\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 13\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  cursor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> pointer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">tools\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> button\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">hover\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">not\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">disabled\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> srgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">42b883 \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">22\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> transparent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">tools\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> button\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">disabled\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  opacity\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0.3\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  cursor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> default\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">length\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 11\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> ui-monospace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Menlo\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Consolas\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> monospace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  opacity\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0.5\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F* Touch screens have no hover: the buttons stay. *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">@\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">media\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">hover\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  .\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">tools\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">    opacity\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fstyle>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"name":3601,"lang":843,"code":3602,"html":3603},"tracks.ts","export interface Track {\n  id: string;\n  title: string;\n  artist: string;\n  length: string;\n  hue: number;\n}\n\nexport const TRACKS: Track[] = [\n  { id: 'midnight', title: 'Midnight Drive', artist: 'Neon Coast', length: '3:42', hue: 168 },\n  { id: 'paper', title: 'Paper Planes', artist: 'The Folds', length: '2:58', hue: 28 },\n  { id: 'tide', title: 'Low Tide', artist: 'Harbor', length: '4:05', hue: 220 },\n  { id: 'bloom', title: 'Static Bloom', artist: 'Violet Hour', length: '3:21', hue: 300 },\n  { id: 'golden', title: 'Golden Hour', artist: 'Sundial', length: '3:09', hue: 52 },\n];","\u003Cpre class=\"shiki shiki-themes dnd-light dnd-dark\" style=\"--shiki-light:#27272a;--shiki-dark:#e4e4e7;--shiki-light-bg:#00000000;--shiki-dark-bg:#00000000\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">export\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> interface\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Track\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">  id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">  title\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">  artist\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">  length\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">  hue\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> number\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">export\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> TRACKS\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Track\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[]\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> [\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'midnight'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> title\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Midnight Drive'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> artist\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Neon Coast'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> length\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '3:42'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> hue\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 168\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'paper'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> title\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Paper Planes'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> artist\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'The Folds'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> length\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '2:58'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> hue\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 28\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'tide'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> title\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Low Tide'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> artist\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Harbor'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> length\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '4:05'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> hue\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 220\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'bloom'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> title\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Static Bloom'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> artist\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Violet Hour'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> length\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '3:21'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> hue\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 300\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'golden'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> title\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Golden Hour'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> artist\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Sundial'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> length\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '3:09'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> hue\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 52\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">];\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[3605,3608,3612,3616],{"name":3545,"lang":549,"code":3606,"html":3607},"\u003Cscript setup lang=\"ts\">\nimport { DnDProvider } from '@vue-dnd-kit\u002Fcore';\nimport Planner from '.\u002FPlanner.vue';\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003C!-- The ⋯ menus move rows with @vue-dnd-kit\u002Factions. -->\n  \u003CDnDProvider>\n    \u003CPlanner \u002F>\n  \u003C\u002FDnDProvider>\n\u003C\u002Ftemplate>","\u003Cpre class=\"shiki shiki-themes dnd-light dnd-dark\" style=\"--shiki-light:#27272a;--shiki-dark:#e4e4e7;--shiki-light-bg:#00000000;--shiki-dark-bg:#00000000\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><script\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> setup\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> lang\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"ts\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> DnDProvider \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '@vue-dnd-kit\u002Fcore'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Planner \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '.\u002FPlanner.vue'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fscript>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><template>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">  <!-- The ⋯ menus move rows with @vue-dnd-kit\u002Factions. -->\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <DnDProvider>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <Planner\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <\u002FDnDProvider>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Ftemplate>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"name":3609,"lang":549,"code":3610,"html":3611},"Column.vue","\u003Cscript setup lang=\"ts\">\nimport { toRef, useTemplateRef } from 'vue';\nimport { makeSortableList } from '@vue-dnd-kit\u002Fcore';\nimport Row from '.\u002FRow.vue';\n\ntype Task = { id: string; title: string; points: number };\nconst props = defineProps\u003C{\n  column: { id: string; title: string; tasks: Task[] };\n  other: { id: string; title: string };\n}>();\n\nconst listRef = useTemplateRef\u003CHTMLElement>('list');\n\u002F\u002F The id is what `moveItem(id, { list })` names.\nconst { items } = makeSortableList(listRef, {\n  id: props.column.id,\n  items: toRef(props.column, 'tasks'),\n  group: 'sprint',\n});\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Csection class=\"column\">\n    \u003Ch3>\n      {{ column.title }}\n      \u003Cspan class=\"sum\">{{ column.tasks.reduce((sum, task) => sum + task.points, 0) }} pt\u003C\u002Fspan>\n    \u003C\u002Fh3>\n    \u003Cul ref=\"list\" class=\"list\">\n      \u003CRow v-for=\"(task, index) in items\" :key=\"task.id\" :task=\"task\" :index=\"index\" :other=\"other\" \u002F>\n    \u003C\u002Ful>\n  \u003C\u002Fsection>\n\u003C\u002Ftemplate>\n\n\u003Cstyle scoped>\n.column {\n  display: flex;\n  flex: 1 1 240px;\n  flex-direction: column;\n  max-width: 300px;\n  padding: 10px;\n  border: 1px solid color-mix(in srgb, currentColor 10%, transparent);\n  border-radius: 14px;\n  background: color-mix(in srgb, currentColor 3%, Canvas);\n}\n\nh3 {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin: 2px 4px 10px;\n  font-size: 13px;\n  font-weight: 600;\n}\n\n.sum {\n  font: 11px\u002F1 ui-monospace, Menlo, Consolas, monospace;\n  opacity: 0.55;\n}\n\n.list {\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  gap: 6px;\n  min-height: 170px;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\u003C\u002Fstyle>","\u003Cpre class=\"shiki shiki-themes dnd-light dnd-dark\" style=\"--shiki-light:#27272a;--shiki-dark:#e4e4e7;--shiki-light-bg:#00000000;--shiki-dark-bg:#00000000\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><script\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> setup\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> lang\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"ts\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> toRef\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> useTemplateRef \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'vue'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> makeSortableList \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '@vue-dnd-kit\u002Fcore'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Row \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '.\u002FRow.vue'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Task\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> title\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> points\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> number\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> };\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> props \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> defineProps\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><{\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">  column\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> title\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> tasks\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Task\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[]\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> };\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">  other\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> title\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> };\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}>();\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> listRef \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> useTemplateRef\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">HTMLElement\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">>(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">'list'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F\u002F The id is what `moveItem(id, { list })` names.\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> items \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> makeSortableList\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">listRef\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">  id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> props\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">column\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">  items\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> toRef\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">props\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">column\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'tasks'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">),\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">  group\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'sprint'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">});\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fscript>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><template>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <section\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"column\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <h3>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">      {{ column.title }}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">      <span\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"sum\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">{{ column.tasks.reduce((sum, task) => sum + task.points, 0) }} pt\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fspan>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <\u002Fh3>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <ul\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> ref\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"list\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"list\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">      <Row\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> v-for\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">task\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> index\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> items\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">key\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">task\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">task\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">task\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">index\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">index\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">other\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">other\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <\u002Ful>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <\u002Fsection>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Ftemplate>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><style\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> scoped\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">column\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 240\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  flex-direction\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> column\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  max-width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 300\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  padding\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 10\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> solid\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> srgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> currentColor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 10\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> transparent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 14\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> srgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> currentColor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 3\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> Canvas\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">h3\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  align-items\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> center\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  justify-content\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> space-between\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  margin\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 4\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 10\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font-size\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 13\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font-weight\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 600\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">sum\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 11\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> ui-monospace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Menlo\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Consolas\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> monospace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  opacity\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0.55\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">list\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  flex-direction\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> column\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  gap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 6\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  min-height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 170\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  margin\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  padding\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  list-style\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fstyle>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"name":3613,"lang":549,"code":3614,"html":3615},"Planner.vue","\u003Cscript setup lang=\"ts\">\nimport { computed, reactive } from 'vue';\nimport { useDnD } from '@vue-dnd-kit\u002Fcore';\nimport Column from '.\u002FColumn.vue';\n\nconst columns = reactive([\n  {\n    id: 'this',\n    title: 'This week',\n    tasks: [\n      { id: 'auth', title: 'Passkey sign-in', points: 5 },\n      { id: 'search', title: 'Search filters', points: 3 },\n      { id: 'icons', title: 'New app icons', points: 2 },\n    ],\n  },\n  {\n    id: 'next',\n    title: 'Next week',\n    tasks: [\n      { id: 'export', title: 'Export to PDF', points: 3 },\n      { id: 'audit', title: 'Accessibility audit', points: 5 },\n    ],\n  },\n]);\nconst otherOf = (id: string) => columns.find((column) => column.id !== id)!;\n\n\u002F\u002F The keys only drive keyboard drags: show them while one runs.\nconst { status, active } = useDnD();\nconst byKeys = computed(() => status.value === 'dragging' && active.value?.sensor === 'keyboard');\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"planner\">\n    \u003Cdiv class=\"columns\">\n      \u003CColumn v-for=\"column in columns\" :key=\"column.id\" :column=\"column\" :other=\"otherOf(column.id)\" \u002F>\n    \u003C\u002Fdiv>\n    \u003Cp class=\"keys\" :class=\"{ on: byKeys }\">\n      \u003Cspan>\u003Ckbd>↑\u003C\u002Fkbd>\u003Ckbd>↓\u003C\u002Fkbd> move\u003C\u002Fspan>\n      \u003Cspan>\u003Ckbd>←\u003C\u002Fkbd>\u003Ckbd>→\u003C\u002Fkbd> other week\u003C\u002Fspan>\n      \u003Cspan>\u003Ckbd>Space\u003C\u002Fkbd> drop\u003C\u002Fspan>\n      \u003Cspan>\u003Ckbd>Esc\u003C\u002Fkbd> cancel\u003C\u002Fspan>\n    \u003C\u002Fp>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cstyle scoped>\n.planner {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 14px;\n  width: 100%;\n}\n\n.columns {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n  gap: 12px;\n  width: 100%;\n}\n\n.keys {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n  gap: 6px 16px;\n  margin: 0;\n  font-size: 12px;\n  opacity: 0.35;\n  transition: opacity 0.2s;\n}\n\n.keys.on {\n  opacity: 1;\n}\n\nkbd {\n  margin-right: 3px;\n  padding: 2px 6px;\n  border: 1px solid color-mix(in srgb, currentColor 25%, transparent);\n  border-bottom-width: 2px;\n  border-radius: 5px;\n  font: 11px\u002F1 ui-monospace, Menlo, Consolas, monospace;\n}\n\n.keys.on kbd {\n  border-color: #42b883;\n  color: #42b883;\n}\n\u003C\u002Fstyle>","\u003Cpre class=\"shiki shiki-themes dnd-light dnd-dark\" style=\"--shiki-light:#27272a;--shiki-dark:#e4e4e7;--shiki-light-bg:#00000000;--shiki-dark-bg:#00000000\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><script\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> setup\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> lang\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"ts\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> computed\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> reactive \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'vue'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> useDnD \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '@vue-dnd-kit\u002Fcore'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Column \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '.\u002FColumn.vue'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> columns \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> reactive\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">([\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">    id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'this'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">    title\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'This week'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">    tasks\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> [\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">      {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'auth'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> title\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Passkey sign-in'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> points\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 5\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">      {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'search'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> title\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Search filters'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> points\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 3\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">      {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'icons'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> title\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'New app icons'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> points\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">    ],\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">    id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'next'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">    title\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Next week'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">    tasks\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> [\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">      {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'export'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> title\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Export to PDF'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> points\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 3\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">      {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'audit'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> title\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Accessibility audit'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> points\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 5\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">    ],\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">]);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> otherOf\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> columns\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">find\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">((\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">column\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> column\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">id \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">!==\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)!;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F\u002F The keys only drive keyboard drags: show them while one runs.\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> status\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> active \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> useDnD\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">();\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> byKeys \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> computed\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(()\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> status\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">===\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'dragging'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> &&\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> active\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">?.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">sensor \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">===\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'keyboard'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fscript>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><template>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <div\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"planner\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <div\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"columns\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">      <Column\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> v-for\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">column \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> columns\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">key\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">column\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">column\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">column\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">other\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">otherOf\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">column\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <\u002Fdiv>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <p\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"keys\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> :class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"{ on: byKeys }\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">      <span><kbd>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">↑\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fkbd><kbd>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">↓\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fkbd>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> move\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fspan>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">      <span><kbd>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">←\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fkbd><kbd>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">→\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fkbd>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> other week\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fspan>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">      <span><kbd>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">Space\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fkbd>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> drop\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fspan>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">      <span><kbd>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">Esc\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fkbd>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> cancel\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fspan>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <\u002Fp>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <\u002Fdiv>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Ftemplate>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><style\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> scoped\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">planner\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  flex-direction\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> column\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  align-items\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> center\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  gap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 14\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 100\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">columns\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  flex-wrap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> wrap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  justify-content\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> center\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  gap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 12\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 100\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">keys\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  flex-wrap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> wrap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  justify-content\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> center\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  gap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 6\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 16\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  margin\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font-size\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 12\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  opacity\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0.35\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  transition\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> opacity \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0.2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">s\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">keys\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">on\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  opacity\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">kbd\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  margin-right\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 3\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  padding\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 6\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> solid\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> srgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> currentColor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 25\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> transparent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-bottom-width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 5\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 11\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> ui-monospace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Menlo\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Consolas\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> monospace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">keys\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">on\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> kbd\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">42b883\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">42b883\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fstyle>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"name":3126,"lang":549,"code":3617,"html":3618},"\u003Cscript setup lang=\"ts\">\nimport { nextTick, ref, useTemplateRef } from 'vue';\nimport { onClickOutside, onKeyStroke } from '@vueuse\u002Fcore';\nimport { makeSortableItem } from '@vue-dnd-kit\u002Fcore';\nimport { useDnDActions } from '@vue-dnd-kit\u002Factions';\n\nconst props = defineProps\u003C{\n  task: { id: string; title: string; points: number };\n  index: number;\n  other: { id: string; title: string };\n}>();\nconst el = useTemplateRef\u003CHTMLElement>('el');\nmakeSortableItem(el, { item: () => props.task });\n\nconst open = ref(false);\nconst menu = useTemplateRef\u003CHTMLElement>('menu');\nonClickOutside(menu, () => (open.value = false));\nonKeyStroke('Escape', () => (open.value = false));\n\nconst { moveItem, startDrag } = useDnDActions();\nconst choose = async (action: () => unknown) => {\n  open.value = false;\n  await nextTick();\n  await action();\n};\n\n\u002F\u002F One move in one call: picked up, put there and dropped, announced and animated.\nconst toTop = () => moveItem(props.task.id, { index: 0 });\nconst toOther = () => moveItem(props.task.id, { list: props.other.id, index: 0 });\n\u002F\u002F A keyboard drag, handed to the arrow keys: Space or Enter drops, Escape cancels.\nconst withKeys = () => {\n  el.value?.focus();\n  startDrag(props.task.id, { type: 'keyboard' });\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cli ref=\"el\" class=\"row\">\n    \u003Cspan class=\"title\">{{ task.title }}\u003C\u002Fspan>\n    \u003Cspan class=\"points\">{{ task.points }}\u003C\u002Fspan>\n    \u003Cspan ref=\"menu\" class=\"more\">\n      \u003Cbutton type=\"button\" aria-label=\"Move…\" :aria-expanded=\"open\" @click=\"open = !open\">⋯\u003C\u002Fbutton>\n      \u003Cspan v-if=\"open\" class=\"menu\" role=\"group\" aria-label=\"Move\">\n        \u003Cbutton type=\"button\" @click=\"choose(withKeys)\">Move with arrow keys\u003C\u002Fbutton>\n        \u003Cbutton type=\"button\" @click=\"choose(toOther)\">Send to {{ other.title }}\u003C\u002Fbutton>\n        \u003Cbutton type=\"button\" :disabled=\"index === 0\" @click=\"choose(toTop)\">To the top\u003C\u002Fbutton>\n      \u003C\u002Fspan>\n    \u003C\u002Fspan>\n  \u003C\u002Fli>\n\u003C\u002Ftemplate>\n\n\u003Cstyle scoped>\n.row {\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 7px 6px 7px 12px;\n  border-radius: 10px;\n  background: Canvas;\n  box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 9%, transparent);\n  font-size: 13px;\n  cursor: grab;\n  user-select: none;\n}\n\n.row:focus-visible {\n  outline: 2px solid #42b883;\n  outline-offset: 2px;\n}\n\n.row[data-dnd-placeholder] {\n  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, #42b883 55%, transparent);\n  background: color-mix(in srgb, #42b883 7%, Canvas);\n}\n\n.row[data-dnd-placeholder] > * {\n  visibility: hidden;\n}\n\n[data-dnd-overlay] .row {\n  box-shadow:\n    0 0 0 2px #42b883,\n    0 16px 28px -14px rgb(0 0 0 \u002F 0.5);\n}\n\n.title {\n  flex: 1;\n}\n\n.points {\n  padding: 3px 7px;\n  border-radius: 99px;\n  background: color-mix(in srgb, currentColor 8%, transparent);\n  font: 11px\u002F1 ui-monospace, Menlo, Consolas, monospace;\n}\n\n.more > button {\n  width: 26px;\n  height: 26px;\n  border: 0;\n  border-radius: 7px;\n  background: none;\n  color: inherit;\n  font-size: 16px;\n  cursor: pointer;\n}\n\n.more > button:hover,\n.more > button[aria-expanded='true'] {\n  background: color-mix(in srgb, currentColor 10%, transparent);\n}\n\n.menu {\n  position: absolute;\n  top: calc(100% + 4px);\n  right: 0;\n  z-index: 2;\n  display: flex;\n  flex-direction: column;\n  min-width: 210px;\n  padding: 4px;\n  border-radius: 10px;\n  background: Canvas;\n  box-shadow:\n    0 0 0 1px color-mix(in srgb, currentColor 14%, transparent),\n    0 14px 30px -12px rgb(0 0 0 \u002F 0.5);\n}\n\n.menu button {\n  padding: 8px 10px;\n  border: 0;\n  border-radius: 7px;\n  background: none;\n  color: inherit;\n  font: 13px\u002F1.2 system-ui, sans-serif;\n  text-align: left;\n  cursor: pointer;\n}\n\n.menu button:hover:not(:disabled),\n.menu button:focus-visible {\n  background: color-mix(in srgb, #42b883 16%, transparent);\n  outline: none;\n}\n\n.menu button:disabled {\n  opacity: 0.4;\n  cursor: default;\n}\n\u003C\u002Fstyle>","\u003Cpre class=\"shiki shiki-themes dnd-light dnd-dark\" style=\"--shiki-light:#27272a;--shiki-dark:#e4e4e7;--shiki-light-bg:#00000000;--shiki-dark-bg:#00000000\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><script\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> setup\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> lang\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"ts\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> nextTick\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> ref\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> useTemplateRef \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'vue'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> onClickOutside\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> onKeyStroke \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '@vueuse\u002Fcore'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> makeSortableItem \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '@vue-dnd-kit\u002Fcore'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> useDnDActions \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '@vue-dnd-kit\u002Factions'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> props \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> defineProps\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><{\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">  task\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> title\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> points\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> number\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> };\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">  index\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> number\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">  other\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> title\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> };\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}>();\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> el \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> useTemplateRef\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">HTMLElement\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">>(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">'el'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">makeSortableItem\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">el\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> item\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ()\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> props\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">task \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">});\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> open \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> ref\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">false\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> menu \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> useTemplateRef\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">HTMLElement\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">>(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">'menu'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">onClickOutside\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">menu\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ()\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">open\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> false\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">));\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">onKeyStroke\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">'Escape'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ()\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">open\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> false\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">));\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> moveItem\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> startDrag \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> useDnDActions\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">();\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> choose\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> async\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">action\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ()\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> unknown\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">  open\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> false\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  await\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> nextTick\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">();\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  await\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> action\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">();\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">};\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F\u002F One move in one call: picked up, put there and dropped, announced and animated.\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> toTop\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ()\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> moveItem\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">props\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">task\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> index\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> });\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> toOther\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ()\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> moveItem\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">props\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">task\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> list\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> props\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">other\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> index\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> });\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F\u002F A keyboard drag, handed to the arrow keys: Space or Enter drops, Escape cancels.\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> withKeys\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ()\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">  el\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">?.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">focus\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">();\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">  startDrag\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">props\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">task\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'keyboard'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> });\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">};\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fscript>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><template>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <li\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> ref\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"el\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"row\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <span\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"title\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">{{ task.title }}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fspan>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <span\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"points\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">{{ task.points }}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fspan>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <span\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> ref\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"menu\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"more\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">      <button\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"button\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> aria-label\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"Move…\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> :aria-expanded\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"open\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> @click\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"open = !open\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">⋯\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fbutton>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">      <span\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> v-if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"open\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"menu\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> role\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"group\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> aria-label\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"Move\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">        <button\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"button\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> @click\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"choose(withKeys)\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">Move with arrow keys\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fbutton>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">        <button\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"button\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> @click\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"choose(toOther)\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">Send to {{ other.title }}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fbutton>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">        <button\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"button\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> :disabled\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"index === 0\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> @click\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"choose(toTop)\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">To the top\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fbutton>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">      <\u002Fspan>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <\u002Fspan>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <\u002Fli>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Ftemplate>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><style\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> scoped\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">row\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  position\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> relative\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  align-items\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> center\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  gap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 8\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  padding\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 7\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 6\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 7\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 12\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 10\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Canvas\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  box-shadow\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> srgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> currentColor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 9\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> transparent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font-size\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 13\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  cursor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> grab\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  user-select\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">row\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">focus-visible\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  outline\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> solid\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">42b883\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  outline-offset\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">row\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">data-dnd-placeholder\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">]\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  box-shadow\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> inset\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1.5\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> srgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">42b883 \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">55\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> transparent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> srgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">42b883 \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">7\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> Canvas\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">row\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">data-dnd-placeholder\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">]\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> >\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> *\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  visibility\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> hidden\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">data-dnd-overlay\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">]\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> .\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">row\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  box-shadow\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">    0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">42b883\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">    0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 16\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 28\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> -14\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> rgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> \u002F \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0.5\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">title\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">points\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  padding\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 3\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 7\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 99\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> srgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> currentColor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 8\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> transparent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 11\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> ui-monospace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Menlo\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Consolas\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> monospace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">more\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> >\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> button\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 26\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 26\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 7\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> inherit\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font-size\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 16\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  cursor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> pointer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">more\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> >\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> button\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">hover\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">more\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> >\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> button\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">aria-expanded\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">'true'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">]\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> srgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> currentColor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 10\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> transparent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">menu\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  position\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> absolute\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  top\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> calc\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">100\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> +\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 4\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  right\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  z-index\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  flex-direction\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> column\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  min-width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 210\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  padding\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 4\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 10\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Canvas\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  box-shadow\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">    0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> srgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> currentColor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 14\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> transparent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">),\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">    0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 14\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 30\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> -12\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> rgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> \u002F \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0.5\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">menu\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> button\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  padding\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 8\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 10\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 7\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> inherit\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 13\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">1.2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> system-ui\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> sans-serif\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  text-align\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> left\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  cursor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> pointer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">menu\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> button\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">hover\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">not\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">disabled\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">),\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">menu\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> button\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">focus-visible\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> srgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">42b883 \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">16\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> transparent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  outline\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">menu\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> button\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">disabled\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  opacity\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0.4\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  cursor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> default\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fstyle>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",1793707542338]