body{position:relative;font-family:sans-serif;margin:0 auto;max-width:500px;background:#f0fff0}h1{position:absolute;top:0;right:0;z-index:2;background:tomato;font-size:12px;margin:0;padding:4px 8px;text-align:right;pointer-events:none;border-end-start-radius:8px;border-end-end-radius:8px;corner-shape:squircle}dialog{border:none;h2{font-size:20px;margin:0;font-weight:400}}.move-handle{touch-action:pan-x;cursor:grab;user-select:none;width:40px;text-align:center}.empty{padding-top:50px;text-align:center}nav{@media(max-width:800px){position:fixed;inset-inline-end:0;inset-block-end:0;z-index:1}}button{cursor:pointer;height:40px;line-height:40px;border:none;border-radius:8px;background-color:#8080801a;padding:0 16px;&:hover,&:focus{outline:none;background-color:#80808033}&:active{background-color:#8080804d}}button.icon{width:40px;padding:0;background-color:transparent;position:relative;&:before{content:"";border-radius:50%;position:absolute;inset:0;z-index:-1}&:hover:before,&:focus:before{background-color:#8080801a}}button.fab{min-width:80px;margin:8px;.text{margin-inline-start:8px}}button.fab,button.icon{padding:0}span.icon{filter:brightness(0)}svg{font-size:24px;vertical-align:middle}ul{>li,>.backlay{height:40px;line-height:40px}>li{position:relative;display:flex;background-color:#f0fff0;z-index:0;@media(width<800px)and (pointer:coarse){touch-action:pan-y}.text{flex:1}.actions{display:flex;gap:8px}}>.backlay{position:absolute;left:0;right:0;z-index:-1;padding:0 16px;&.right{text-align:right}}}.desktop-only{@media(width<800px)and (pointer:coarse){display:none}}.tutorial{font-size:smaller;@media(width>=800px)or (pointer:fine){display:none}}section>header{position:relative;z-index:1;display:flex;justify-content:space-between;background:#f0fff0;border-bottom:solid #555 1px;padding-top:8px;height:40px;line-height:40px;h2{font-size:20px;margin:0;font-weight:400}}ul{margin:0;padding:0;width:100%;overflow:hidden;list-style-type:none;background:#0000001a}
